Vuetify v-select onchange 事件返回之前选择的值而不是当前值答案

【问题标题】：Vuetify v-select onchange event returns previously selected value instead of currentVuetify v-select onchange 事件返回之前选择的值而不是当前值
【发布时间】：2018-10-08 23:29:55
【问题描述】：

我有一个 <v-select> 下拉列表，我想将其用作 URL 列表以导航到其他页面。我遇到的问题是我使用的onchangeevent 返回先前选择的值而不是当前选择的值。

我已经调整了代码以打印到控制台而不是进行测试。 :hint 功能工作正常，所以我确信它与 onchange 功能有关。

Codepen

代码如下：

<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>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

您不需要指定数据，因为我猜这就是 change 事件默认通过的原因。

所以改变：

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

只是

v-on:change="changeRoute"

在函数调用中：

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

【讨论】：

【解决方案2】：

我不完全知道为什么 ${select.src} 在更改事件中保留先前的值。你可以试试下面的代码：

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

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

【讨论】：

【解决方案3】：

我不知道为什么change 不能正常工作。但是input 确实有效。

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

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

或许你可以open a new bug report for Vuetify

【讨论】：

我认为这不是错误。只是在change 上，您在触发更改时传递了一个参数，但尚未更新，因此参数仍然是旧值。 input 仅在值更新后才会触发，因此有效。
@Traxo 但即使我在更改事件处理程序中使用this.select.src，它也会返回旧值。这就是为什么我认为这是一个错误。
同样不正确，因为你必须使用$nextTick
@Traxo 没有适当的理由需要$nextTick。那是为了 DOM 更新。 this.select.src 应立即更改。当我将代码更改为正常选择时，change 工作codepen.io/jacobgoh101/pen/aGpzmm?editors=1111。在 vuetify 中，它不起作用 codepen.io/anon/pen/PebrqW?editors=1011 。它适用于普通选择，但不适用于 vuetify 选择，仍然不是错误？
嗯我可能是错的，但我认为你不能这样比较它，因为 vuetify 使用它自己的自定义选择组件，因此事件可能不一样。