Vue 3.1.12 动态生成select的v-model绑定失效问题排查

Hey Viktoriya，刚仔细看了你的代码和问题描述，发现问题主要出在响应式属性的初始化和值变化后的逻辑触发这两个地方，咱们一步步来解决：

1. 初始化selectedValues时的数据源兼容问题 #

后端返回的product.values里，有的是数组（比如Clothes Size），有的是对象（比如Color），你之前用this.product.values[optionName][0]只能正确获取数组的第一个元素，但对象的话因为键是字符串（比如"0"），用数字索引0拿不到值，导致部分selectedValues的属性初始化错误，甚至可能影响后续的响应式绑定。

修改初始化逻辑，统一处理数组和对象类型的选项值：

if (this.product && this.product.values) {
  Object.keys(this.product.values).forEach((optionName) => {
    const optionValues = this.product.values[optionName];
    // 把对象转成数组，统一处理结构
    const valuesArray = Array.isArray(optionValues) ? optionValues : Object.values(optionValues);
    const firstValue = valuesArray[0];
    if (firstValue) {
      this.selectedValues[optionName] = firstValue.id;
    }
  });

  this.updateSku();
  console.log(this.currentSku);
}

2. 未监听selectedValues的变化，导致currentSku不更新 #

你现在的代码里，只有初始化时调用了updateSku，但用户修改select选项时，selectedValues变化后并没有触发updateSku，所以currentSku不会跟着更新。

有两种解决方式，选一种就行：

方式一：给select添加@change事件直接触发更新

修改模板里的select标签：

<select v-model="selectedValues[optionName]" @change="updateSku">
  <option v-for="value in values" :key="value.id" :value="value.id">
    {{ value.name }}
  </option>
</select>

方式二：用Vue的watch深度监听selectedValues的变化

在组件的选项里添加watch配置：

export default {
  // ...其他代码
  watch: {
    selectedValues: {
      // 当selectedValues的任意属性变化时，调用updateSku
      handler() {
        this.updateSku();
      },
      // 深度监听对象内部属性的变化
      deep: true
    }
  },
  // ...其他代码
}

3. 额外：确保selectedValues的响应式有效性 #

Vue 3中，data返回的空对象会被自动转为Proxy实现响应式，但如果还是遇到属性更新不触发视图的情况，可以改用reactive显式创建响应式对象：

import { reactive } from 'vue';

export default {
  data() {
    return {
      // ...其他属性
      selectedValues: reactive({}), // 用reactive创建响应式对象
    };
  },
  // ...其他代码
}

做完这些修改后，你应该能看到select选项变化时，selectedValues正确更新，同时currentSku也会跟着重新计算啦。

备注：内容来源于stack exchange，提问作者viktoriya ivanets