CODEWITHSUNDEEP
vue.jsvuejs2
user10753862
user10753862

Reputation:

v-model and selected is not working at the same time... --vue.js

UPDATED

select input's selected option is not working if I use v-model on 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>

if I don't use v-model, then selected is working. But I need that v-model bind for filter my array. But it looks like I can't use v-model and selected at the same time.

Upvotes: 1

Views: 280

Answers (2)

novruzrhmv
novruzrhmv

Reputation: 639

Use selected attribute

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>

Upvotes: 2

vesmihaylov
vesmihaylov

Reputation: 367

Adding a bonus to the above answer, if you want to have a default placeholder but not a valid value (Like "Select country here") you can do it like this: 

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

Upvotes: 1

Related Questions