select menu does not populate the top area if I have a v-model on it-CodePudding

I am using vuejs and have a basic select menu that works fine.Issue is as soon as i add a v-model, the default name that says "choose option" disappear. Anyway to avoid this from happening, I tried populating the empty array with some text, but it still doesnt make any text display in the select menu label area.

new Vue({
  el: "#app",
  data: {
   selections:[]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
<select id="test" v-model="selection"  style="width: 110px;">
  <option value="Select a option" selected disabled>Choose an area:</option>
    <option v-for="t in todos" :value="a">{{ t.name }}</option>

</select>
</div>

CodePudding user response：

As per your current code I did not see any selection property in data object, You have to assign v-model value as per your default first option value.

Live Demo :

new Vue({
  el: "#app",
  data: {
   selection: 'Select a option',
   todos: [{
    name: 'alpha'
   }, {
    name: 'beta'
   }, {
    name: 'gamma'
   }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <select v-model="selection">
    <option value="Select a option" disabled>Choose an area:</option>
    <option v-for="(t, i) in todos" :key="i" :value="t.name">{{ t.name }}</option>
  </select>
</div>