vue.js - 在 Vue 中构建一个 v-checkbox 列表

Question

我需要用复选框构建一个待办事项列表，而不是使用一个数组来拉动每个项目，就好像它是一个单独的行一样，这些都是单独的列。所以对象看起来像

     [{"InterProgramatic":false,"IntraProgramatic":false,"MultiInstitution":false,"Accepted":true,"Rejected":false,"Cancer_Related":true}]

如何使用 v-for 循环构建复选框？

我的数组很简单

    statusItems: []

如果每个项目都在单独的行中，那么我可以分配一个单独的 id，但是在 Vue 中是否有更简单的方法来做到这一点？为了保存我计划仅将 statusItems 对象发送回 Web API 并在那里解析它的数据，因此我希望尽可能绑定它。

我可以用

      v-for="(item, index) in statusItems" :key="index" 

           <v-checkbox
                :key="index"
                :label="item"
                color="success"
                v-bind:id="status"
                v-model="statusItems[key].checked"
                @change="statusChange(statusItems[key])"
              >></v-checkbox>

构建复选框，但不确定如何绑定它。谢谢您的帮助

标签： vue.js

Answer 1

那是你想做的吗？ https://codesandbox.io/s/vue-template-tkx60?fontsize=14

要绑定v-model，您需要使用数组索引或对象键。