Vue应用启动时如何确定select选项的默认选中状态？

嘿，这个问题的核心其实是Vue的v-model和选项值的匹配规则，我来给你理清楚～

首先，Vue会通过v-model绑定的变量值，和<option>上:value设置的值做匹配，匹配成功的选项就会被默认选中。但这里有个关键细节：如果绑定的是对象/数组这类引用类型，Vue会判断引用是否相等，而不是看对象的属性值是否完全一致。

看你的代码，teams数组里的{id: 2, name: 'Manchester'}和teamsSelected里的{id: 2, name: 'Manchester'}虽然属性完全一样，但它们是两个独立的对象，引用地址不同，所以Vue没法识别它们是同一个选项，导致默认选中没生效。

给你两种可行的解决方案：

方案一：直接引用数组内的对象作为初始值 #

既然引用相等才能匹配，那我们直接把teams数组里的目标对象赋值给teamsSelected就行：

new Vue({
  el: '#app',
  data: {
    teams: [
      {id: 1, name: 'Bayern'},
      {id: 2, name: 'Manchester'},
      {id: 3, name: 'Barcelona'},
      {id: 4, name: 'PAOK'},
    ],
    teamsSelected: this.teams[1], // 直接取数组中索引为1的Manchester对象
  },
});

这样teamsSelected和选项的:value指向同一个对象引用，Vue就能准确匹配到默认选项了。

方案二：绑定基本类型的唯一标识（更推荐） #

如果不想处理对象引用的问题，更稳妥的方式是绑定对象的唯一标识（比如id这种基本类型），后续再通过标识获取完整对象：

先修改模板，把:value改成team.id：

<div id="app">
  <select v-model="selectedTeamId">
    <option v-for="team in teams" :value="team.id">{{team.name}}</option>
  </select>
</div>

然后修改data和添加计算属性：

new Vue({
  el: '#app',
  data: {
    teams: [
      {id: 1, name: 'Bayern'},
      {id: 2, name: 'Manchester'},
      {id: 3, name: 'Barcelona'},
      {id: 4, name: 'PAOK'},
    ],
    selectedTeamId: 2, // 直接设置默认选中的id
  },
  computed: {
    // 通过计算属性获取选中的完整对象
    teamsSelected() {
      return this.teams.find(team => team.id === this.selectedTeamId);
    }
  }
});

这种方式的好处是，基本类型（数字、字符串）的匹配完全基于值相等，不会有引用问题，而且后续处理数据（比如提交表单）时，传递id也比传递整个对象更简洁。

总结一下：Vue对select选项的匹配规则是——基本类型比值，引用类型比内存地址，根据这个规则调整你的初始值设置，就能实现默认选中啦～

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