设置为true时,不显示Vuetify对话框

x6h2sr28  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(186)

我正在使用vuetify对话框(不是我的第一次),并将一个变量isVisible设置为“true”,当我的条件得到满足时。然而,当我点击一个图表时,它应该会打开对话框,但我却在控制台中收到如下错误:“未捕获(在承诺中)TypeError:Cannot read properties of null(阅读'nextSibling')”我觉得很奇怪,因为我在加载了所有数据之后才得到这个结果。代码如下:
第一个

fnvucqvd

fnvucqvd1#

我认为这是因为对话框位于另一个组件内部,并且不包含isVisible变量。如果您创建了Card组件,则可以使用propsisVisible传递给它
Card.vue

export default {
    props: ['isVisible'],
    // rest of your component code
}

然后像这样使用:

<Card :isVisible="isVisible">

或者将对话框放在组件之外,例如:

<template>
    <Card class="p-card p-3 p-fluid">
        <template #title>
            <div>
                <span class="text-sm text-base" >Card</span>
          </div>
        </template>
        <template #content> 
            <div>
                <Chart />
                <p>Mat: {{mat}}</p>
                <p>Total: {{tot}} Kg</p>
            </div>
        </template>
    </Card>
    <Dialog header="Information" v-model:visible="isVisible" :style="{width: '40vw'}" :modal="true">
    </Dialog>
</template>

相关问题