CODEWITHSUNDEEP
vue.jsvue-component
Volker Mauel
Volker Mauel

Reputation: 522

Vuejs Custom Component - Two-Way-Binding not working, One-Way-Binding works

I'm getting started with refactoring my application to use vue.js as front-end framework and began writing the first components i'll use.

For this i created a component for a table, and one for the rows.

One-Way-Binding works so far (as in my model changes and the changes will be reflected by updating the UI).

My model for this part is an Array of Objects, where i'm binding to multiple attributes, one is them is called Checked.

Now if i change the model, the view is updated, the checkbox will be checked, but if i check the checkbox manually, the model is not updated.

Vue.component('peak-table-row', {
    props: ["peak", "graphname", "idx"],
    data() {
        return {
            _peak: {}
        };
    },
    created() {
        console.log(this);
        this.$data._peak = getPeak(this.graphname, this.idx);
    },
    render(h) {
        return h('tr', {
                style: {
                    backgroundColor: getColor(this.idx, 0.5)
                }
            }, [
                h("td", [h("input", {attrs: {type:"checkbox",checked:this.peak.Checked}})]),
            ]
        );
    }
});
Vue.use("peak-table-row");

Until now the documentation was really helpful, but i can't seem to find how I'd resolve this.

Upvotes: 0

Views: 1693

Answers (1)

Arielle Nguyen
Arielle Nguyen

Reputation: 3172

You can use the v-model directive to create two-way data bindings on form input like checkbox.

<input type="checkbox" id="checkbox" v-model="_peak.Checked">

Example: https://codesandbox.io/s/nrvxm76n9l

Upvotes: 1

Related Questions