多个复选框，绑定到 Vue JS 中的同一个数组

Question

我开始使用 vuejs 和 vue 网格 https://jsfiddle.net/kc11/7fqgavvq/

我想在以下位置显示选中的行对象：

    <pre> {{ selected| json}} </pre>

代码区域，

如 "Mutiple checkboxes, bound to the same Array:" 示例中 http://vuejs.org/guide/forms.html#Checkbox 处的文档

如您所见，当我选中 1 个复选框时，所有复选框都已选中。为什么会这样？我该如何解决这个问题？

Answer 1

您在代码中做出了一些错误的假设（主要是在范围方面）。

您的主实例中有 selected 数组，而不是 demo-grid 组件，其中您有复选框：

var demo = new Vue({
    el: '#demo',
    data: {
        searchQuery: '',
        gridColumns: ['name', 'power'],
        gridData: [
            {name: 'Chuck Norris', power: Infinity},
            {name: 'Bruce Lee', power: 9000},
            {name: 'Jackie Chan', power: 7000},
            {name: 'Jet Li', power: 8000}
        ],
        selected: [] // <- This one
    }
})

而且您的 demo-grid 组件上也没有定义 selectAll 方法，即使您在模板中引用它也是如此：

<input @click="selectAll" type="checkbox" v-model="selected" id="{{ entry.name }}" value="{{ entry.name }}"></td>

如果你因此将你的 selected 属性传递给你的 demo-grid，（并在道具中定义它），你应该没问题：

        <demo-grid
            v-bind:data="gridData"
            v-bind:columns="gridColumns"
            v-bind:filter-key="searchQuery"
            v-bind:selected="selected"> <!-- here -->
        </demo-grid>

并定义一个selectAll方法：

methods: {
    ...
    selectAll: function () {
       ...
    }

在这里你可以看到一个工作示例： https://jsfiddle.net/7fqgavvq/3/

Answer 2

您应该将 selected 键添加到组件的 data，而不是添加到 vue 的主实例。

https://jsfiddle.net/7fqgavvq/4/

多个复选框，绑定到 Vue JS 中的同一个数组

Mutiple checkboxes, bound to the same Array in Vue JS

javascript

vue.js