我有这个 v-dialog 组件：

<v-dialog v-model="dialog" @afterEnter="open">        
    <template #activator="{ props: activatorProps }">
            <slot name="activator" v-bind="activatorProps">
                <v-btn
                    v-bind="activatorProps"
                    :disabled="!Boolean(props.itemId)"
                    class="my-auto"
                >
                    Container Management
                </v-btn>
            </slot>
        </template>
</v-dialog>

<script lang="ts" setup>
const dialog = ref(false)
const open = async () => {
    try {
        // Some API calls
    } catch(){
        dialog.value = false
    }
}
</script>

当我尝试在API调用失败时关闭它，它不会关闭。我是通过activator插槽打开对话框的（不确定这是否会有影响）。

解决方案

afterEnter 并不是用来控制对话框显示与否的好地方。它主要用于副作用，而不是用于取消对话框。

要修复它，你可以改用 watch 代替 afterEnter：

watch(dialog, async (val) => {
if (!val) return

try {
    await someApi()
} catch {
    dialog.value = false
}
})

或者更好的做法是在打开对话框之前就执行你的逻辑，将API调用移出对话框的生命周期，大致像这样：

<template #activator="{ props: activatorProps }">
<v-btn
  v-bind="activatorProps"
 :disabled="!Boolean(props.itemId)"
    class="my-auto"
    @click="handleOpen"
  >
    Container Management
</v-btn>
</template>

const dialog = ref(false)

const handleOpen = async () => {
try {
    // API call first
    await someApi()

    // Only open if success
    dialog.value = true
} catch {
    dialog.value = false
  }
}