Vue.js中v-bind:value绑定空对象时默认下拉选项设置问题

这个问题的核心在于**Vue的v-model匹配是严格相等（===）**的——你初始的selectedLeague是空对象{}，而默认选项的value是null，两者完全不相等，所以Vue没办法把它们关联起来，自然不会默认选中这个选项。

给你两个简单的解决思路，选哪个看你的需求：

方案一：让默认选项的value匹配初始的空对象 #

把默认选项的value绑定成空对象{}，这样和你初始的selectedLeague值完全一致，页面加载时就会自动选中它：

<select v-model="selectedLeague" @change="chooseLeague()">
  <!-- 把value设为{}，和初始值匹配 -->
  <option :value="{}" disabled>Choose League</option>
  <option v-for="league in model.leagues" :value="league">
    {{ league.name }}
  </option>
</select>

这里加disabled是为了防止用户手动选回这个默认选项，如果你的业务允许用户重新选择“请选择”，可以去掉这个属性。

方案二：修改selectedLeague的初始值为null #

如果你能调整selectedLeague的初始值，把它从{}改成null，那你原来写的默认选项就能正常工作了：
首先在data里修改初始值：

data() {
  return {
    selectedLeague: null, // 改成null
    model: {
      leagues: [] // 你的联赛数组
    }
  }
}

然后下拉框代码保持你原来的写法即可：

<select v-model="selectedLeague" @change="chooseLeague()">
  <option disabled :value="null">Choose League</option>
  <option v-for="league in model.leagues" :value="league">
    {{ league.name }}
  </option>
</select>

额外提示：处理change事件 #

不管用哪种方案，建议在chooseLeague函数里加个判断，避免选中默认选项时执行不必要的逻辑：

chooseLeague() {
  // 检查是否是默认选项（空对象或null）
  const isDefault = Object.keys(this.selectedLeague).length === 0 || this.selectedLeague === null;
  if (isDefault) {
    return; // 什么都不做
  }
  // 这里写选中有效联赛后的逻辑
}

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