Vue js v-model不同的复选框答案

【问题标题】：Vue js v-model different checkboxesVue js v-model不同的复选框
【发布时间】：2018-02-14 07:31:30
【问题描述】：

我对 Vue Js 有点陌生。我试图从 Vue 组件中获取每个复选框的布尔值，但是当我选中一个时，其余的也会被选中，所以我只能选中一个。我已经用计算过但没有结果。

<v-card>
       <v-layout row wrap class="text-xs-center" v-for="ingredient in ingredients" :key="ingredient.id">
           <v-layout column>
                  <v-flex xs6>
                     <v-checkbox color="light-blue lighten-2" v-bind:label="`${ingredient.name}`" v-model="checked" light></v-checkbox>
                          </v-flex>
                      </v-layout>
                      <v-layout column>
                          <v-flex xs6>
                              <v-subheader>{{ingredient.price}} €</v-subheader>
                          </v-flex>
                      </v-layout>
                  </v-layout>
        </v-card>

        export default {
            data: () => ({

                checked: [],
                checked1: '',
                ingredients: [{
                    id: 1,
                    name: "tomato",
                    price: 2
                }, {
                    id: 2,
                    name: "Cheese",
                    price: 2.0
                }, {
                    id: 3,
                    name: "Frankfurt",
                    price: 2.25
                }, {
                    id: 4,
                    name: "Mushrooms",
                    price: 1.6
                }, {
                    id: 5,
                    name: "Pepper",
                    price: 2.5
                }, {
                    id: 1,
                    name: "Ham",
                    price: 2.75
                }],

            }),
            computed: {
                checked() {
                    return this.checked
                }
            }
        }

【问题讨论】：

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

尝试在每个成分项上设置一个检查值：

ingredients: [{
  id: 1,
  name: "tomato",
  price: 2,
  checked: false
}]

然后你可以像这样在for循环中设置复选框的值：

<v-checkbox v-model="ingredient.checked"></v-checkbox>

【讨论】：

太棒了！谢谢:)

【解决方案2】：

只需将 :id 和 :value 绑定到数组

<div v-for="item, i in items>
   <input type="checkbox" :id="i" :value="i" v-model="checked" />
</div>

export default {
  data() {
    return: {
       checked: [],
       items: []
    };
  },
  created() {
      axios.get('my-data').then(resp => this.items = resp.data.items);
  }
}

【讨论】：