Vuetify 3中v-autocomplete组件丢失change事件，如何追踪选择变更？

Vuetify 3 移除了 v-autocomplete 组件的 change 事件，你可以通过以下两种方式实现选择变更的追踪：

方法一：使用 @update:modelValue 事件 #

这是替代原 change 事件的最直接方案，当组件绑定的 v-model 值发生变化时，该事件会触发，参数为最新选中的值。

示例代码：

<v-autocomplete
  label="Choose stock"
  v-model="selected_stock"
  :items="current_stocks"
  @update:modelValue="stockSelected"
  item-value="id" 
  item-title="name"
></v-autocomplete>

<script setup>
import { ref } from 'vue'

const selected_stock = ref(null)
// 示例数据
const current_stocks = ref([
  { id: 1, name: 'Stock A' },
  { id: 2, name: 'Stock B' }
])

const stockSelected = (selected) => {
  console.log(selected)
}
</script>

方法二：使用 Vue 的 watch 监听变量 #

如果需要监听值变化前后的差异，或者需要更灵活的逻辑控制，可以直接监听 v-model 绑定的响应式变量：

示例代码：

<v-autocomplete
  label="Choose stock"
  v-model="selected_stock"
  :items="current_stocks"
  item-value="id" 
  item-title="name"
></v-autocomplete>

<script setup>
import { ref, watch } from 'vue'

const selected_stock = ref(null)
const current_stocks = ref([
  { id: 1, name: 'Stock A' },
  { id: 2, name: 'Stock B' }
])

watch(selected_stock, (newVal, oldVal) => {
  console.log('新选中值:', newVal)
  console.log('旧选中值:', oldVal)
})
</script>

补充：Vuetify 3 中原 item-title 属性已更名为 item-text，如果你的组件显示文本不生效，记得调整该属性。

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