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

Question

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.

Vue (like React) uses 1 way binding. You can use .sync modifier to perform 2 way binding — Jacob Goh
– Jacob Goh, Commented Apr 20, 2018 at 6:05

Arielle Nguyen · Accepted Answer · 2018-04-20 06:35:39Z

1

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

answered Apr 20, 2018 at 6:35

Arielle Nguyen

3,1721 gold badge22 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related