在Q-dialog (QuasarV2 ve3)中使用自定义页脚时未定义属性键

Question

请参考编辑，因为我已经更新了我的问题。

我有一个Dialog组件，定义如下:

<template>
<div>
<q-dialog v-model="showDialogFunc">
<q-card>
<q-footer>
test
</q-footer>
</q-card>
</q-dialog>
</div>
<template>
<script>
export default {
name: "dialogCustomised",
prop: {
showDialog: {
type: Boolean,
default: false,
}
},
computed: {
showDialogFunc {
get()
{
return this.showDialog;
}
set(data)
{
this.$emit("toggle-dialog", data);
}
}
}
}
</script>

当使用组件时，页脚不会显示uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')的错误。我不知道value的属性键是从哪里来的

编辑1:我正在使用类星体的故事书测试代码，以前q-footer似乎不起作用。后来我决定在类星体环境下测试一下代码和q-footer的作品。但是，如果页脚是导入的另一个自定义组件，则它似乎不能正常工作，现在没有生成错误。

编辑2:我认为是故事书导致了没有被展示。但我不确定如何解决这个问题，以显示。

<template>
<div>
<q-dialog v-model="showDialogFunc">
<q-card>
<customised-footer>
test
</customised-footer>
</q-card>
</q-dialog>
</div>
<template>
<script>
export default {
name: "dialogCustomised",
components: { customisedFooter },  
prop: {
showDialog: {
type: Boolean,
default: false,
}
},
computed: {
showDialogFunc {
get()
{
return this.showDialog;
}
set(data)
{
this.$emit("toggle-dialog", data);
}
}
}
}
</script>

Answer 1

尝试基于设置的样式;

<template>
<div>
<q-dialog v-model="showDialogFunc">
<q-card>
<q-footer> test </q-footer>
</q-card>
</q-dialog>
</div>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
showDialog: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["toggle-dialog"]);
const showDialogFunc = computed({
get() {
return props.showDialog;
},
set(data) {
emit("toggle-dialog", data);
},
});
</script>