v-модель и выбранный не работает одновременно ... --vue.js

Question

ОБНОВЛЕНО

опция выбора входа selected не работает, если я использую v-модель на select.

<p class="topics">fruits</p>
<select class="select" v-model="selectFruit">
    <option selected value="">--all--</option>
    <option :key="index" :value="item" v-for="(item,index) in fruitList">{{item}}</option>
</select>

, если я не использую v-модель, тогда selected работает.Но мне нужна эта v-модель для фильтрации моего массива.Но, похоже, я не могу использовать V-модель и выбранную одновременно.

Answer 1

Использовать выбранный атрибут

https://www.w3schools.com/tags/att_option_selected.asp

   <select class="select" v-model="searchCity">
      <option value="" selected>--全部--</option>
      <option :value="item" v-for="item in uniqueCity">{{item}}</option>
   </select>

Answer 2

Добавив бонус к вышеуказанному ответу, если вы хотите иметь заполнитель по умолчанию, но не допустимое значение (например, «Выберите страну здесь»), вы можете сделать это следующим образом:

  <select>
  <option value="" selected disabled hidden>Select country here</option>
  <option value="1">Bulgaria</option>
  <option value="2">Serbia</option>
  <option value="3">Cyprus</option>
  </select>