Vue js v-model 不同的复选框

Question

我对 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
                }
            }
        }

Answer 1

尝试为每个成分项目设置一个选中的值：

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

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

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

Answer 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);
  }
}

Vue js v-model 不同的复选框

Vue js v-model different checkboxes

vue.js

vue-component

vuejs2

vuetify.js