v模型和所选模型不能同时工作... --vue.js

Question

已更新

如果我在selected上使用v-model，则

选择输入的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>