onchange事件返回先前选择的值而不是当前值

onchange事件返回先前选择的值而不是当前值

本文介绍了Vuetify v-select onchange事件返回先前选择的值而不是当前值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有< 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.

以下是代码:

<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事件返回先前选择的值而不是当前值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 14:39