Как остановить Vue.js от выбора первой опции в опции выбора?

Question

Приложение My 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

Не могли бы вы просто добавить пустое поле опции?Это должно решить вашу проблему.

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