Vuetify v-select onchange事件返回先前选择的值而不是当前值 [英] Vuetify v-select onchange event returns previously selected value instead of current

问题描述

我有< v-select> 下拉列表，我想将其用作导航到其他网页的网址列表。我遇到的问题是我正在使用的 onchange 事件返回先前选择的值而不是当前选定的值。

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.

我已经调整了代码以打印到控制台而不是测试。 ：提示功能正常，所以我确定它与 onchange 函数有关。

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

以下是代码：

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

推荐答案

您无需指定数据，因为那是我猜测更改事件默认通过。

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

所以更改：

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

到

v-on:change="changeRoute"

并在函数调用中：

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

这篇关于Vuetify v-select onchange事件返回先前选择的值而不是当前值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！