Vuetify v-select onChange事件返回旧值而非当前选中值问题求助

嘿，这个问题我之前也碰到过！Vuetify的v-select有时候确实会在@change事件触发时，v-model还没完成响应式更新，导致你拿到的是上一次选中的值——而:hint能正常显示是因为它是基于v-model的响应式渲染，会自动等到值更新后再刷新，所以没这个问题。

给你几个靠谱的解决方案：

1. 优先用watch监听v-model（最推荐） #

直接监听v-model的变化，这是Vue官方推荐的响应式处理方式，完全避开事件触发时机的问题：

<template>
  <v-app>
    <v-container fluid>
      <v-select
        v-model="selectedUrl"
        :items="urlList"
        :hint="`当前选中: ${selectedUrl}`"
        label="选择跳转链接"
      ></v-select>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      selectedUrl: null,
      // 替换成你的URL列表
      urlList: ['https://page1.com', 'https://page2.com', 'https://page3.com']
    }
  },
  watch: {
    selectedUrl(newVal) {
      if (newVal) {
        console.log('当前选中的最新值:', newVal)
        // 这里写跳转逻辑：window.location.href = newVal
      }
    }
  }
}
</script>

2. 一定要用@change的话，配合$nextTick #

如果坚持要用@change事件，可以通过$nextTick等待Vue完成DOM更新和v-model赋值后再获取值：

<template>
  <v-app>
    <v-container fluid>
      <v-select
        v-model="selectedUrl"
        :items="urlList"
        :hint="`当前选中: ${selectedUrl}`"
        label="选择跳转链接"
        @change="handleChange"
      ></v-select>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      selectedUrl: null,
      urlList: ['https://page1.com', 'https://page2.com', 'https://page3.com']
    }
  },
  methods: {
    async handleChange() {
      // 等待下一次DOM更新周期，确保v-model已经更新
      await this.$nextTick()
      console.log('当前选中的最新值:', this.selectedUrl)
      // 跳转逻辑
    }
  }
}
</script>

3. 如果用Vuetify 3，改用@update:model-value #

Vuetify 3推荐使用@update:model-value事件来监听值的变化，这个事件会在v-model更新完成后触发，直接拿到最新值：

<template>
  <v-app>
    <v-container fluid>
      <v-select
        v-model="selectedUrl"
        :items="urlList"
        :hint="`当前选中: ${selectedUrl}`"
        label="选择跳转链接"
        @update:model-value="handleUpdate"
      ></v-select>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
const selectedUrl = ref(null)
const urlList = ref(['https://page1.com', 'https://page2.com', 'https://page3.com'])

const handleUpdate = (newVal) => {
  console.log('当前选中的最新值:', newVal)
  // 跳转逻辑
}
</script>

核心原因就是@change事件的触发时机早于Vue的响应式更新，导致v-model还没同步最新值，上面的方法都能完美解决这个问题～

内容的提问来源于stack exchange，提问作者Matthew Snell