解决v-for循环中多个v-select的v-model值被覆盖问题

问题背景 #

现有产品数据结构如下：

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

需求是根据选中的主产品（selectedMainGroup）对应的subProducts数量，动态生成对应数量的v-select，每个下拉框展示对应types选项。目前通过计算属性comModels实现了下拉框的渲染：

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

对应的模板代码：

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

当前问题：所有v-select绑定同一个selectedModel，选择任意一个下拉框时，其他下拉框的选中值会被覆盖，且无法兼容subProducts数量变化的场景。

解决方案 #

1. 改用对象存储选中值 #

将单个变量selectedModel改为对象，以每个subProduct的name作为键，存储对应的选中值，确保每个下拉框的选中值相互独立。

在data中初始化：

data() {
  return {
    selectedMainGroup: "Camera",
    selectedModels: {} // 用对象存储每个subProduct的选中值
  }
}

2. 修改v-model绑定 #

模板中把v-model绑定到selectedModels[product.name]，每个下拉框对应对象中唯一的键：

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

3. 可选：初始化默认选中值 #

如果需要默认选中每个下拉框的第一个选项，可以通过监听comModels变化或页面初始化时自动赋值：

watch: {
  comModels(newSubProducts) {
    newSubProducts.forEach(product => {
      // 仅当无选中值时，默认选中第一个选项
      if (!this.selectedModels[product.name]) {
        this.selectedModels[product.name] = product.types[0]?.value;
      }
    });
  }
},
mounted() {
  this.$nextTick(() => {
    this.comModels.forEach(product => {
      if (!this.selectedModels[product.name]) {
        this.selectedModels[product.name] = product.types[0]?.value;
      }
    });
  });
}

4. 兼容subProducts数量变化 #

当selectedMainGroup切换导致comModels变化时，selectedModels对象会自动保留之前已选中的同名字段值，新增的subProduct会自动生成对应的存储键（如果配置了默认值则自动赋值），完全适配数量变化的场景。

补充说明 #

• 优先使用product.name作为键，因为它是subProduct的业务唯一标识，比循环索引更可靠
• 如果subProduct没有唯一名称，也可以用循环的index作为键，但需注意subProducts顺序变化时可能导致选中值错位

内容的提问来源于stack exchange，提问作者Abdullah Semih Gür