VueJS中option的selected属性不生效问题求助

嘿，我来帮你搞定这个问题！你提到在循环带有单位的items数据时，想把is_base_unit为true的Unit2设为select的默认选项，但功能没生效。结合Vue表单绑定的常见坑，我整理了几个可能的原因和解决办法：

• 确保v-model初始值正确绑定
  Select的默认选中状态完全由v-model控制，你需要在初始化items数据时，给每个item的绑定字段赋值为对应is_base_unit: true的单位标识（比如id或名称）。
  举个具体的代码示例：
  假设你的模板是这样的：

  <tr v-if="items.length > 0" v-for="item in items" :key="item.id">
    <td>{{ item.name }}</td>
    <td>
      <select v-model="item.selectedUnit">
        <option v-for="unit in item.units" :key="unit.id" :value="unit.id">
          {{ unit.name }}
        </option>
      </select>
    </td>
  </tr>
  

  那你需要在获取到items数据后，立刻给每个item设置默认选中值：

  // 比如在created钩子或者接口请求成功后
  this.items.forEach(item => {
    const baseUnit = item.units.find(unit => unit.is_base_unit === true);
    if (baseUnit) {
      item.selectedUnit = baseUnit.id; // 这里要和option的:value对应
    }
  });
  

• 检查value类型是否匹配
  经常会出现v-model的类型和option的:value类型不匹配的情况，比如v-model是数字，但value是字符串（或者反过来），导致Vue无法识别匹配项。
  举个例子：如果unit的id是数字类型，确保:value="unit.id"传递的是数字，而不是字符串；如果用unit.name作为value，要保证item.selectedUnit的初始值和unit.name完全一致（包括大小写、空格等细节）。

• 添加正确的key避免DOM复用问题
  在v-for循环select和option时，一定要加上唯一的:key属性，防止Vue虚拟DOM复用导致的渲染异常。比如给外层的tr、select、option都加上各自的唯一key（比如item.id、unit.id）。

• 验证数据本身的正确性
  可以临时在模板里加个调试输出，确认units数组里确实存在is_base_unit: true的项：

  <td>{{ item.units.filter(u => u.is_base_unit) }}</td>
  

  如果输出为空，那问题出在数据本身，需要检查接口返回或者数据初始化的逻辑。

内容的提问来源于stack exchange，提问作者Sam Teng Wong