I am having troubles with how vuejs binds the data. I have a parent Vueponent which is the handles the layout of my form and i have child vueponent which handle the different input groups. I am having troubling getting the data from the child ponent to sync with the parent ponent for when i do my form submit in future.

I currently have my file like this:

var title = "";
Vueponent('create_new_entry', {
    template: '<div><div class="row"><h1 v-on:click="test()">{{title}}</h1><div class="col-md-12"><section_title></section_title></div></div></div>',
    data    : function() {
        return {
            title: title
        };
    },
});
Vueponent('section_title', {
    template: '<div><h1 v-on:click="test()">{{title}}</h1><input type="text" class="form-control" v-model="title"></div>',
    data    : function() {
        return {
            title: title
        };
    },
    methods : {
        test: function() {
            console.log(this);
        }
    }
});

I am not sure where i am going wrong and as much as i try to the documentation im still having trouble with how the data get bound and updated.

I am having troubles with how vuejs binds the data. I have a parent Vue.ponent which is the handles the layout of my form and i have child vue.ponent which handle the different input groups. I am having troubling getting the data from the child ponent to sync with the parent ponent for when i do my form submit in future.

I currently have my file like this:

var title = "";
Vue.ponent('create_new_entry', {
    template: '<div><div class="row"><h1 v-on:click="test()">{{title}}</h1><div class="col-md-12"><section_title></section_title></div></div></div>',
    data    : function() {
        return {
            title: title
        };
    },
});
Vue.ponent('section_title', {
    template: '<div><h1 v-on:click="test()">{{title}}</h1><input type="text" class="form-control" v-model="title"></div>',
    data    : function() {
        return {
            title: title
        };
    },
    methods : {
        test: function() {
            console.log(this);
        }
    }
});

I am not sure where i am going wrong and as much as i try to the documentation im still having trouble with how the data get bound and updated.

• javascript
• vue.js
• vuejs2
• vue-ponent

1 Answer 1

You are declaring two entirely separate fields, one in each ponent, and there is nothing tying them together other than they share the same name. Vue is treating those as two separate fields, when one changes, the other does not. The fields are private and internal to the ponent instances.

Shared state should be passed down to child ponents as props, and should be passed up to parent ponents as events. There are a few ways of approaching this, the simplest being adding a prop and event. A more plex way would be to use a state management tool like vuex. https://github./vuejs/vuex

Here is a simple example using a prop and an event.

Prop documentation: https://v2.vuejs/v2/guide/ponents.html#Props

Event documentation: https://v2.vuejs/v2/guide/ponents.html#Custom-Events

var title = "";
Vue.ponent('create_new_entry', {
    template: '<div><div class="row"><h1 v-on:click="test()">{{title}}</h1><div class="col-md-12"><section_title :title="title" @title-changed="changeTitle"></section_title></div></div></div>',
    data    : function() {
        return {
            title: title
        };
    },
    methods: {
        changeTitle(newTitle) {
            this.title = newTitle;
        }
    }
});
Vue.ponent('section_title', {
    template: '<div><h1 v-on:click="test()">{{title}}</h1><input type="text" class="form-control" v-model="innerTitle"></div>',
    props: ['title'],
    data    : function() {
        return {
            innerTitle: this.title
        };
    },
    methods : {
        test: function() {
            console.log(this);
        }
    },
    watch: {
        title(val){
            this.innerTitle = val;
        },
        innerTitle(val) {
            this.$emit('title-changed', val);
        }
    }
});

The parent ponent passes its title ponent down to the child ponent so it has access to it. The child ponent is unable to modify its props, so it copies the value of the prop to a local data field innerTitle. The input in the child ponent is bound to the innerTitle using v-model. A watch is added on the innerTitle so that any time it changes, it emits an event title-changed. The parent ponent listens for the title-changed event, and whenever it occurs, the parent updates its title field to that new value.

The child ponent also has a watch on the title prop so that if the parent's title value changes for any other reason, the child ponent will be able to update its internal state to match the parent's new value.

As stated before, you could also use Vuex, or use another Vue instance as a bus as explained here https://v2.vuejs/v2/guide/ponents.html#Non-Parent-Child-Communication