Vue js v-model different 확인란

Vue js v-model different 확인란

저는 Vue Js가 좀 생소해요.Vue 컴포넌트에서 각 체크박스의 부울값을 가져오려고 하는데 1개를 켜면 나머지 1개도 체크되기 때문에 1개만 체크할 수 있습니다.계산해서 해봤지만 아무 결과도 없어요.

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

각 성분 항목에 체크된 값을 설정해 보십시오.

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

다음으로 for-loop 체크박스의 값을 다음과 같이 설정할 수 있습니다.

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

어레이에 :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);
  }
}

언급URL : https://stackoverflow.com/questions/46064526/vue-js-v-model-different-checkboxes