components - How to Two-way Data Binding Between Parents and grandchildren in Vue.js -
i faced problem, solve cookies want solve problem without cookies. have component called app-header , has component called outmodal. now, first vue instance require component app-header.
var vue = new vue({ el : "html", data : { title : "site title", description : "description of page", keywords : "my keywords", view : "home", login : "login" }, components:{ "app-header" :require("../../components/header"), "app-footer" :require("../../components/footer"), "home" :require("../../views/home") }, });
code of app-header
var vue = require("vue"); vue.partial("login",require("../../partials/login.html")); vue.partial("logged",require("../../partials/logged.html")); module.exports = { template : require("./template.html"), replace : true, components : { outmodal : require("../outmodal") }, props : ['login'] }
code of outmodal
var vue = require("vue"); vue.partial("loginmodal",require("../../partials/loginmodal.html")); module.exports = { template : require("./template.html"), replace : true, props : ['name'], data : function () { return { userlogin : { mail : "", password : "", remember : ""} } }, methods : { formsubmit : function(e){ e.preventdefault(); this.$http.post("http://example.com/auth/login",{ "email": this.userlogin.mail , "password": this.userlogin.password },function(data,status,request){ $.cookie("site_token",data.token,{expires : 1}) }).error(function(data,status,request){ }); } }, ready : function(){ console.log("it works") } }
in outmodal component connect api , check login, if login succesfull, want change value of login variable in vue instance. use web pack build requires. don't know how can data binding between these files.
how can solve it? i
the best solution found
for 0.12
http://012.vuejs.org/guide/components.html#inheriting_parent_scope
for 1.0
http://v1.vuejs.org/guide/components.html#parent-child-communication
for 2.0
https://vuejs.org/v2/guide/components.html#composing-components (use props one-way bind data parent child)
Comments
Post a Comment