How to fix vmodel selected option vue js

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

21 thoughts on “How to fix vmodel selected option vue js”

  1. 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>
    Reply

Leave a Comment