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不是对象（评估'newSchedule.yards [index] .id “）“

我是如何实现这一目标的？

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

Answer 1

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

执行此操作的正确方法如下：

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/

注意事项：

您无法在模板标记本身上使用v-for
您不能在模板内部的顶级元素上使用v-for。模板应包含一个唯一的封闭元素，通常为<div>
无需在输入元素上设置id。您需要将v-model用于模型视图绑定

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

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

我上面的回答更侧重于构建Vue组件并使用适当的绑定框来呈现列表。

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

以下是用于捕获已检查值的jsFiddle：https://jsfiddle.net/z48thf9a/1/

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

我不确定我是否正确理解了您的问题，如果这样可以解决您的问题。你能提供更多代码样本吗？

复选框表单数组Vue 2

1 个答案: