Question

我有这样的数据:

products: [
    {
      name: "Camera",
      subProducts: [
         {
          name: "Type",
          types: [
             {
              name: "CAM A",
              value: "A",
             },
             {
              name: "CAM B",
              value: "B",
             },
           ],
          },

          {
           name: "Recorder",
           types: [
             {
              name: "Yes",
              value: 1,
             },
             {
              name: "No",
              value: 0,
             },
            ],
           },

          ],
        },

我想根据子产品的数量来挑选一些选修课。每一当选者都将展示一个类型的群体。

举例来说,在第一个阶段,你可以在南极海委会A/南极海委会B之间挑选2名候选人。在第二种情况下,你可以选择是/否。

computed: {
 comModels: function () {
  for (let i = 0; i < this.products.length; i++) {
    if (this.products[i].name == this.selectedMainGroup) {
      return this.products[i].subProducts;
    }
  }
  return "nothing";
 },
},

这是我对以下方面的真心所料:

          <v-select
            v-for="product in comModels"
            :itemProps="itemProps"
            v-model="selectedModel"
            :items="product.types"
            :label="product.name"
            dense
            solo
            outlined
            hide-details
            class="ma-2"
          >
          </v-select>

问题在于,我只选择其中一人,而另一人则被删除。我如何能够保持其价值观,同时保持灵活性,因为可能有更多的分门别类。

Answer 1

选择的单体字体需要独立,然后将选定的模型改为目标,并使用v-model=“选择的Model[产品名称]”。

data(){
        return {
            selectedModel:{}
        }
    }

...
 <v-select
            v-for="product in comModels"
            :itemProps="itemProps"
            v-model="selectedModel[product.name]"
            :items="product.types"
            :label="product.name"
            dense
            solo
            outlined
            hide-details
            class="ma-2"
          >
          </v-select>

友情链接