vue.js - 如何阻止 Vue.js 在选择选项中选择第一个选项？

Question

我的 Vue/Buefy 应用程序会自动从列表中选择第一个选项：

<b-select model="form.cities[i].index"
    v-on:input.once="analyt('City ' + i)"
    @input="form.cities[i].name = cities[form.cities[i].index ['@attributes'].Name"
    :id="'city-'+i"
    :name="'city-'+i"
    :required="i == 0"
>
    <option
        :value="index"
        v-for="(city,index) in cities"
        v-text="city['@attributes'].Name">
    </option>
</b-select>

我该如何避免呢？我只想默认选择空字段（或根本不选择任何内容）

Answer 1

我通过确保填充数组中的第一个元素是我的默认值（我想要选择的那个）来解决这个问题。然后我将value元素select的设置为默认值。

就我而言，我是根据选择不同的下拉列表来填充下拉列表。

第一个下拉

<select id="firstDropdown" @change="populateDropdown">
  // options code ...
</select>

下拉列表由第一个下拉列表填充。

<select id="populatedDropdown">
  <option v-for:"item in items">
    {{ item }}
  </option>
</select>

在组件脚本中

data: function() {
  return {
    items: []
  }
},
method: {
  populateDropdown() {
  // fetch items from api and store in "array".
  this.items = ['Default'].concat(array);
  document.querySelector('#popualtedDropdown').value = 0;
}

我希望这是有道理的并有所帮助。

Answer 2

<option
  value="none" selected disabled hidden> 
</option>   

这对我来说无缝。

另一种选择是

<option
  selected> 
</option>  

这在列表中给出了一个空的第一个条目，这有点不受欢迎。

Answer 3

你可以添加一个空的选项字段吗？这应该可以解决您的问题。

<b-select model="form.cities[i].index"
          v-on:input.once="analyt('City ' + i)"
          @input="form.cities[i].name = cities[form.cities[i].index ['@attributes'].Name"
          :id="'city-'+i"
          :name="'city-'+i"
          :required="i == 0"
>
    <option selected></option>
    <option
            :value="index"
            v-for="(city,index) in cities"
            v-text="city['@attributes'].Name">
    </option>
</b-select>