复选框表单数组数据Vue 2

Question

我有一个复选框列表，它是使用由 id 和名称组成的 for 循环生成的：

Data:
yards[{id:1,name:'test'}] etc

HTML:
<ul class="checkbox-list">
     <template v-for="(yard, index) in yards">
                                <li>
                                    <input type="checkbox" 
                                        v-bind:id="'yardlist_'+yard.name"
                                        v-bind:value="yard.id"
                                        v-model="newSchedule.yards.id">
                                    <label v-bind:for="'yardlist_'+yard.name">{{ yard.name }}</label>
                                </li>
                                <li>
                                    <input type="text" 
                                        class="form-control"
                                        placeholder="Yard notes..."
                                        v-model="newSchedule.yards.notes">
                                </li>
                            </template>
                        </ul>

我想将选中的复选框与 id 和 notes 字段一起保存在一个数组中：

newSchedule: {
            due_at: '',
            notes: '',
            users: [],
            yards: [{id:'',notes:'']
        }

我尝试使用码数组中的索引：newSchedule.yards[index].notes 但收到以下错误 "TypeError: undefined is not an object (evalating 'newSchedule.yards[index].id ')"

有什么想法可以实现吗？

** 更新 ** 这是我想要实现的基本小提琴： https://jsfiddle.net/j7mxe5p2/13/

Answer 1

我认为您正在尝试将旧的 jQuery 或 javascript 处理方式与 Vue 框架混合。您不必在 <input> 元素上设置 id 即可捕获或设置其值。

正确的做法如下：

new Vue({
    el: '#app',
    data: function() {
        return {
            yards: [
                {id: 1, name: 'test', selected: true},
                {id: 2,name: 'test 2', selected: false},
                {id: 3,name: 'test 3', selected: false},
                {id: 4,name: 'test 4', selected: true}
            ]
        };

    },
    template: `
        <div class="list-of-yards"> <!-- You cannot use v-for on the top-level element -->
            <label for="jack" v-for="yard in yards">
                <input type="checkbox" v-model="yard.selected"> {{yard.name}}
            </label>
        </div>
    `,
});

这里是上面代码的一个jsFiddle：https://jsfiddle.net/z48thf9a/

注意事项：

1. 您不能在模板标签本身上使用v-for
2. 您不能在模板内的顶级元素上使用v-for。模板应包含一个且唯一的封闭元素，通常为<div>
3. 无需在输入元素上设置id。您需要使用 v-model 进行模型视图绑定

如果仍有问题，请提供 jsFiddle 进一步调试。

在评论 #1 和 #2 之后编辑：

我的上述回复更侧重于构建 Vue 组件并通过正确绑定到复选框来呈现列表。

要将选中的项目放入单独的数组中，您可以使用同一组件中的计算属性来遍历原始数组 this.yards 并仅创建一个新的选定项目数组。

这里是用于捕获检查值的 jsFiddle：https://jsfiddle.net/z48thf9a/1/

您可以修改以上内容以仅捕获id 部分，并将@​​987654335@ 重命名为newSchedule 或您的应用所需的任何内容。

我不确定我是否正确理解了您的问题，以及这是否能解决您的问题。能否提供更多代码示例？