Question

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

我想在：

中显示选中的行对象

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

代码区域，

在＆{34;多个复选框中http://vuejs.org/guide/forms.html#Checkbox的文档中，绑定到同一个数组：＆＃34;示例

正如您在我选中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
    }
})

即使您在模板中引用了selectAll组件也未定义demo-grid方法：

<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中的相同数组

2 个答案: