如何阻止Vue.js+Buefy的b-select自动选中首个选项？

你的b-select默认选中第一个选项，主要原因有两个：一是绑定的v-model（你代码里写的model是笔误，Vue正确双向绑定指令是v-model）初始值和第一个选项的value（也就是index=0）匹配；二是没有提供空值的默认选项来占位。

下面是具体的解决步骤：

1. 确保绑定的初始值为undefined或null #

首先在初始化form.cities数组时，把每个项的index设为undefined，而不是默认的0或者其他数值。这样Vue就不会自动匹配到第一个选项：

// 示例初始化代码
this.form = {
  cities: [
    { index: undefined, name: '' },
    // 其他城市项都按这个格式初始化
  ]
};

2. 添加空值的默认选项 #

在b-select内部、循环生成的选项之前，添加一个value为空的选项。这样当v-model值为undefined时，会自动选中这个空选项，实现“未选中任何内容”的效果：

<b-select 
  v-model="form.cities[i].index" 
  @input.once="analyt('City ' + i)" 
  @input="handleCitySelection(i)" 
  :id="'city-'+i" 
  :name="'city-'+i" 
  :required="i == 0"
>
  <!-- 空默认选项 -->
  <option value="">请选择城市</option>
  
  <!-- 原有循环选项 -->
  <option 
    :value="index" 
    v-for="(city, index) in cities" 
    :key="index"
    v-text="city['@attributes'].Name"
  >
  </option>
</b-select>

3. 优化输入事件避免报错 #

因为现在可能存在空值的情况，建议把@input里的逻辑抽成方法，避免选中空选项时访问undefined['@attributes']导致报错：

// 在Vue组件的methods中添加方法
methods: {
  handleCitySelection(i) {
    const selectedIndex = this.form.cities[i].index;
    if (selectedIndex !== undefined && selectedIndex !== '') {
      this.form.cities[i].name = this.cities[selectedIndex]['@attributes'].Name;
    } else {
      // 选中空选项时清空名称
      this.form.cities[i].name = '';
    }
  },
  analyt(msg) {
    // 你的analyt逻辑
  }
}

这样修改后，下拉框就会默认显示空选项，不会自动选中第一个城市了。

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