Question

我开始重构我的应用程序以使用vue.js作为前端框架，并开始编写我将使用的第一个组件。

为此，我为表创建了一个组件，为行创建了一个组件。

单向绑定到目前为止（在我的模型更改中，更改将通过更新UI反映出来）。

我的这部分模型是一个对象数组，我绑定到多个属性，其中一个叫做已检查。

现在，如果我更改模型，视图会更新，则会选中复选框，但如果我手动选中该复选框，则不会更新模型。

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");

到目前为止，文档确实很有帮助，但我似乎无法找到解决方法。

Answer 1

您可以使用v-model指令在表单输入上创建双向数据绑定，如复选框。

示例：https://codesandbox.io/s/nrvxm76n9l

Vuejs自定义组件 - 双向绑定不起作用，单向绑定工作

1 个答案: