Javascript Vuetify v-select onchange 事件返回先前选择的值而不是当前值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50073919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuetify v-select onchange event returns previously selected value instead of current
提问by Matthew Snell
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.
我有一个<v-select>下拉列表，我想将其用作 URL 列表以导航到其他页面。我遇到的问题是onchange我使用的事件返回先前选择的值而不是当前选择的值。
I have tweaked the code to print to console instead for testing. The :hintfunctionality works fine so I'm sure it's something to do with the onchangefunction.
我已经调整了代码以打印到控制台而不是进行测试。该:hint功能运行良好，所以我确定这与该onchange功能有关。
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>
回答by A. L
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)
}
回答by Jacob Goh
I have no idea why changedoesn't work properly. But inputdoes work.
我不知道为什么change不能正常工作。但input确实有效。
https://codepen.io/jacobgoh101/pen/erBwKa?editors=1011
https://codepen.io/jacobgoh101/pen/erBwKa?editors=1011
v-on:input="changeRoute(`${select.src}`)"
Perhaps you can open a new bug report for Vuetify
也许你可以为 Vuetify 打开一个新的错误报告
回答by Karthik S
I don't exctly know why ${select.src} is holding previous value on change event. You can give a try with below code:
我不知道为什么 ${select.src} 在 change 事件中保持以前的值。您可以尝试使用以下代码：
<v-select @change="changeRoute" ></v-select>
methods: {
changeRoute(selectObj) {
console.log(selectObj)
console.log(selectObj.src)
}
}
