在绑定v-model的<select>中如何正确使用selected属性？

核心原理 #

Vue的v-model是数据驱动的，<select>的选中状态完全由绑定的payload[index]的值决定，所以<option>上的selected属性会被忽略，必须通过控制绑定数据的初始值来实现默认选中。

具体解决方案 #

1. 初始化绑定数据的默认值
   在获取到entries数据后，为payload数组对应索引的位置设置初始值：

// 假设entries是你的数据源数组（Vue2版本）
this.entries.forEach((entry, idx) => {
  if (entry.system_role !== null) {
    // 用$set确保数组修改是响应式的
    this.$set(this.payload, idx, entry.system_role);
  } else {
    // 没有system_role时，默认选中第一个角色（可根据需求调整）
    this.$set(this.payload, idx, entry.roles.length ? entry.roles[0] : '');
  }
});

如果是Vue3，直接赋值即可（Vue3对数组索引修改原生支持响应式）：

this.entries.forEach((entry, idx) => {
  if (entry.system_role !== null) {
    this.payload[idx] = entry.system_role;
  } else {
    this.payload[idx] = entry.roles.length ? entry.roles[0] : '';
  }
});

2. 修改模板，移除无效的selected属性
   去掉<option>上的selected，让v-model完全控制选中状态：

<select v-model="payload[index]">
    <option v-if="entry.system_role !== null" :value="entry.system_role">
        {{ entry.system_role }}
    </option>
    <option v-for="role in entry.roles" :key="role" :value="role">
        {{ role }}
    </option>
</select>

注意：v-for的key要使用唯一值（比如role），避免重复key导致的Vue警告。

为什么之前的方案无效 #

• 你尝试的selected属性会被v-model覆盖，因为Vue优先以绑定的数据作为选中状态的数据源。
• 将数据设为null的方案不适用，是因为你的场景需要保留实际的选项值，直接将初始值设为目标system_role即可满足需求。

内容的提问来源于stack exchange，提问作者RedDebian