32

I have a <v-select> 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 previously selected value instead of the current selected value.

I have tweaked the code to print to console instead for testing. The :hint functionality works fine so I'm sure it's something to do with the onchange function.

Codepen

Here's the code:

<template>
  <v-app>
  <v-container fluid>
    <v-layout row wrap>
      <v-flex xs6>
        <v-select
          :items="items"
          v-model="select"
          label="Select"
          single-line
          item-text="report"
          item-value="src"
          return-object
          persistent-hint
          v-on:change="changeRoute(`${select.src}`)"
          :hint="`${select.src}`"
        ></v-select>
      </v-flex>
    </v-layout>
  </v-container>
</v-app>
</template>

<script>
/* eslint-disable */
    new Vue({
  el: '#app',
  data () {
      return {
        select: { report: 'Rep1', src: '/rep1' },
        items: [
          { report: 'Rep1', src: '/rep1' },
          { report: 'Rep2', src: '/rep2' }
        ]
      }
    },
    methods: {
      changeRoute(a) {
        //this.$router.push({path: a })
        console.log(a)
      }
    }
})
</script>

5 Answers 5

38

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)
  }
1
  • i'm using v-select in a v-data-table, as it only provides the new value to the change handler, how am i supposed to know what item this is for ? Commented Mar 3, 2022 at 21:03
20

For vue3 the event for v-select is update:modelValue

@update:modelValue="changeRoute"
17

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

5
  • 2
    I think it's not a bug tho. It's just that on change you pass an argument when the change is triggered, but not yet updated, so argument is still the old value. input gets triggered only after value is updated, thus it works.
    – Traxo
    Commented Apr 28, 2018 at 12:29
  • @Traxo but even when i use this.select.src in the change event handler, it returns the old value. that's why i think it's a bug.
    – Jacob Goh
    Commented Apr 28, 2018 at 12:32
  • Also incorrect because then you must use $nextTick
    – Traxo
    Commented Apr 28, 2018 at 12:34
  • @Traxo there is no proper reason that $nextTick should be required. that's for DOM update. this.select.src should be changed instantaneously. when i change the code to normal select, change works codepen.io/jacobgoh101/pen/aGpzmm?editors=1111. in vuetify, it does not work codepen.io/anon/pen/PebrqW?editors=1011 . it works for normal select but not for vuetify select, still not a bug ?
    – Jacob Goh
    Commented Apr 28, 2018 at 12:47
  • Hmm I might be wrong, but I think you can't compare it like that because vuetify uses it's own custom select component, thus events might not be same.
    – Traxo
    Commented Apr 28, 2018 at 13:09
7

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)
     }
}
1
@input="changeRoute(select.src)"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.