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>