How to fix vmodel selected option vue js

Question

So I have a web app where the user chooses from a list of options. Look at the following code:

 <div class="form-group"> <select v-model="étatArticle" class="form-control"> <option value="" disabled selected>Indique l'état de ton article</option> <option value="neuf">Neuf</option> <option value=tresBon>Trés bon état</option> <option value="bon">Bon état</option> </select> </div>

The problem is is that the v-model is causing the first selected option to disappear. to understand what I'm saying, look at the following images.

With v-model

Without v-model I get this enter image description here

can you please help me fix that? thank you.

Answer 1

In your component data, you need to define the default value of your v-model. You can see example in my codesandbox .

In your template:

<select v-model="selectedValue" class="form-control">
    <option value="" disabled selected>
      Disabled and selected by default
    </option>
    <option value="first">First</option>
    <option value="second">Second</option>
    <option value="third">Third</option>
  </select>

In your data:

  data() {
    return {
      // Define your value by default to show it
      selectedValue: "",
    };
  },

Answer 2

 new Vue({ template: '#main', data: { etatArticle: null } }).$mount('#app');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div> <template id="main"> <div class="form-group"> <select v-model="etatArticle" class="form-control"> <option:value="null" disabled selected>Indique l'état de ton article</option> <option value="neuf">Neuf</option> <option value=tresBon>Trés bon état</option> <option value="bon">Bon état</option> </select> </div> </template>