[Vuejs]-Select option always selected and hidden

by

0👍

If I understand correctly, you want something like this:

var app = new Vue({
  el: "#elm",
  data: {
    year: null,
    years: [2014, 2015, 2016, 2017, 2018, 2019]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="elm">
  <span>{{year}}</span>
  <select v-model="year">

    <option :value="null" disabled hidden>Previous years</option>
    <option v-for="year in years" :value="year" :key="year">{{year}}</option>
  </select>
</div>

Just set give the Previous years option a disabled tag: <option disabled>Previous years</option>.

Also, you don’t need @change, just use v-model="year", check Form Input Bindings documentation

Leave a comment