for 循环中 v-select 的不同 v-模型

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

          ],
        },

我希望根据子产品的数量有多个 v-select。每个 v-select 都会显示一个类型组。

在此示例中，将有 2 个 v-selecet，在第一个 v-selecet 中，您可以在 CAM A / CAM B 之间进行选择。在第二个 v-selecet 中，您可以在 Yes/No 之间进行选择。我使用计算道具做到了这一点：

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 for:

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

问题是当我选择其中之一时，v-model 只保存其中之一，而另一个被删除。我怎样才能在保持灵活性的同时保留它们的值，因为可能有更多的子产品

Answer 1

两个select的v-model需要独立，所以将selectedModel改为Object，并使用v-model="selectedModel[product.name]"

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>