Vuetify <v-dialog>的@update:model-value事件为何仅在model为false时触发？

问题原因 #

Vuetify的<v-dialog>组件的@update:model-value事件仅在组件内部主动修改绑定值时触发（比如点击对话框外部遮罩、组件内置关闭按钮等操作）。当你通过外部直接修改showDialog.value = true时，属于外部主动更新绑定值，组件仅被动接收新值，不会触发@update:model-value回调，因此handle函数不会执行。

解决方案 #

方案一：调用组件内置的show()方法控制显示 #

给<v-dialog>添加ref，通过调用组件的show()方法触发显示，此时组件内部会主动修改绑定值，进而触发@update:model-value事件：

<template>
  <v-app>
    <v-container>
      <v-text-field v-model="msg" />
    </v-container>
    <v-btn @click="dialogRef.show()">Click</v-btn>
    <v-dialog ref="dialogRef" v-model="showDialog" @update:model-value="handle">
      Dialog
    </v-dialog>
  </v-app>
</template>

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

const msg = ref('Hello World!')
const showDialog = ref(false)
const dialogRef = ref(null)
const handle = newValue => {
  msg.value = newValue
}
</script>

方案二：监听绑定值的变化 #

使用Vue的watch监听showDialog的变化，无论值是外部还是内部修改，都会触发回调：

<template>
  <v-app>
    <v-container>
      <v-text-field v-model="msg" />
    </v-container>
    <v-btn @click="showDialog=true">Click</v-btn>
    <v-dialog v-model="showDialog">
      Dialog
    </v-dialog>
  </v-app>
</template>

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

const msg = ref('Hello World!')
const showDialog = ref(false)

watch(showDialog, (newValue) => {
  msg.value = newValue
})
</script>

方案三：手动触发回调函数 #

封装打开对话框的逻辑到函数中，在修改showDialog值的同时手动调用handle函数：

<template>
  <v-app>
    <v-container>
      <v-text-field v-model="msg" />
    </v-container>
    <v-btn @click="openDialog">Click</v-btn>
    <v-dialog v-model="showDialog" @update:model-value="handle">
      Dialog
    </v-dialog>
  </v-app>
</template>

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

const msg = ref('Hello World!')
const showDialog = ref(false)

const handle = newValue => {
  msg.value = newValue
}

const openDialog = () => {
  showDialog.value = true
  handle(true)
}
</script>

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