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>