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不同的复选框

2 个答案: