установите и снимите флажки отдельно, несмотря на то, что они были созданы в течение l oop in vuejs

Question

Доброго времени суток, разработчики, я только что создал массив флажков и wnat, чтобы отключить или отключить каждый из них, но когда я запускаю действие, все затем проверяют или снимают флажок одновременно, вот что я сделал:

HTML

                        <v-layout v-for="(option,index) in ProductAdded.Categories" :key="index">
                          <v-flex xs12>
                            <div>
                              <input
                                name="id of product"
                                label="id of product"
                                v-model="option.value"
                                type="checkbox"
                                checked
                                @click="option.selected = !option.selected"

                              />
                              <label>{{ option.value }}</label>
                            </div>
                          </v-flex>
                        </v-layout>

В сценарии, затем внутри данных для каждого объекта в массиве ProductAdded.Categories, я только что создал элемент с именем selected, а затем переключаю его на true или false, настраиваясь с @click, предварительно установленным в * 1008. * tag:

SCRIPT

data() {
    return {

      ProductAdded: {
        description: "",
        upload_image3: "",
        upload_image2: "",
        upload_image1: "",
        unities: 0,
        price: 0,
        name: "",
        Categories: [
          { id: 1, value: "Miscellaneous", selected: true },
          { id: 2, value: "Homer", selected: true },
          { id: 3, value: "Electronic", selected: true },
          { id: 4, value: "Internet", selected: true },
          { id: 5, value: "Kids", selected: true },
          { id: 6, value: "Donas", selected: true },
          { id: 7, value: "Sports", selected: true },
          { id: 8, value: "Horror", selected: true }
        ]
      },

    };

Но, думаю, это неправильно установлено, потому что при снятии флажка действие вызывает все флажки, а не только тот, на который я нажимаю. Любой совет о том, что я должен делать? Заранее спасибо !!!!

Answer 1

Вы не можете смоделировать строковый атрибут с флажком. Флажки моделируют только логические значения.

Код работает без v-model="option.value":

var vue = new Vue({
  el: '#vue',
  data: {
      ProductAdded: {
        description: "",
        upload_image3: "",
        upload_image2: "",
        upload_image1: "",
        unities: 0,
        price: 0,
        name: "",
        Categories: [
          { id: 1, value: "Miscellaneous", selected: true },
          { id: 2, value: "Homer", selected: true },
          { id: 3, value: "Electronic", selected: true },
          { id: 4, value: "Internet", selected: true },
          { id: 5, value: "Kids", selected: true },
          { id: 6, value: "Donas", selected: true },
          { id: 7, value: "Sports", selected: true },
          { id: 8, value: "Horror", selected: true }
        ]
      }
  }
})

  
     
      {{ option.value }}
  
  Data:
{{JSON.stringify(ProductAdded.Categories, null, '  ')}}