[Vuejs]-Why is Vue.js a tick behind? Why do I need jQuery to get the current value

by

2👍

✅

Your mistake is doing a two-way binding plus an event. The event is fired at the same time as the model update, therefore the change hasn’t posted yet.

You’d be better off using a watch here.

First, remove the event:

<select id="filter" v-model="filter">
 <option value="all">All</option>
 <option value="one">One</option>
 <option value="two">Two</option>
 <option value="three">Three</option>
</select>

Then put the watch in your Vue object:

watch: {
    filter: function (val) {
      // use val here
    }
}

More info here: https://v2.vuejs.org/v2/guide/computed.html

👤Roger Collins

0👍

I was just replicating your code but it was just totally working fine.

Check the code below:

new Vue({
  el: "#app",
  data: {
  	filter: 'all'
  },
  methods: {
  	changeFilter: function() {
    	alert(this.filter)
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>
<div id="app">
  <select v-model="filter" @change="changeFilter">
   <option value="all">All</option>
   <option value="one">One</option>
   <option value="two">Two</option>
   <option value="three">Three</option>
  </select>
</div>
👤Dencio

Leave a comment