Vue js v型不同的复选框

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>