Vue:为什么Vuetify的< v-dialog>@update:model-value事件只在v-model的值为false时触发?

rdrgkggo  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(205)

请考虑以下使用Vuetify 3.4.2的Vue 3代码:

<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" @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
  }
</script>

字符串
有一个Vuetify PlayPlayground可以尝试一下。
当我点击<v-btn>按钮时,会显示<v-dialog>对话框-指示showDialog的值已更改为true。然而,<v-text-field>中的文本不会更改为true。就好像没有调用handle()函数一样。
当我在对话框外单击时,它会被隐藏,handle()函数会被调用,<v-text-field>中的文本会更改为false-正如预期的那样。
为什么当<v-dialog>模型变为true时不调用handle()?如何更改代码以在<v-dialog>变为可见时触发函数?

im9ewurl

im9ewurl1#

update:model-value是VDialog在VDialog* 内进行更改 * 时发出的事件。当您在父级中将showDialog设置为true时,该值将向下传递到modelValue prop。VDialog更新中的prop值本身不会触发发出。它也不需要。如果父级更改了v-model值,父进程不需要子进程的emit来知道它做了什么。
在这种情况下,您需要的是watcher

import { watch } from 'vue'
...
watch(showDialog, newValue => {
  msg.value = newValue.toString()
})

字符串
更新Vue Playground

相关问题