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

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

<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>

Answer 2

我通过确保填充数组中的第一个元素是我的默认设置（我想要选择的元素）解决了这个问题。然后，将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 3

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

这无缝地为我工作。

另一个选择是

<option
  selected> 
</option>

在列表中给出一个空的第一项，这是不希望的。

如何阻止Vue.js选择select选项中的第一个选项？

3 个答案: