Vuetify V-select Onchange Event Returns Previously Selected Value Instead Of Current

I have a dropdown that I'm wanting to use as a list of URLs to navigate to other pages. The issue I'm running into is the onchangeevent I'm using returns the previ

Solution 1:

You don't need to specify the data because that's what, I'm guessing, the change event passes by default.

So change:

v-on:change="changeRoute(`${select.src}`)"

to just

v-on:change="changeRoute"

and in the function call:

  changeRoute(a) {
    this.$router.push({path: a.src })
    console.log(a)
  }

Solution 2:

I have no idea why change doesn't work properly. But input does work.

https://codepen.io/jacobgoh101/pen/erBwKa?editors=1011

v-on:input="changeRoute(`${select.src}`)"

Perhaps you can open a new bug report for Vuetify

Solution 3:

I don't exctly know why ${select.src} is holding previous value on change event. You can give a try with below code:

<v-select @change="changeRoute" ></v-select>

methods: {
      changeRoute(selectObj) {
        console.log(selectObj)
        console.log(selectObj.src)
     }
}