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 onchange
event 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.
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>