Undefined property key when using Customised-footer in Q-dialog (QuasarV2 Vue3)

user_19246967 0
Viewed 46

Please refer to the edit instead as I have updated my problem.

I have a Dialog component as defined below with a footer:

<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>

When using the component, the footer does not show up with an error of uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value'). I'm not sure where the property key of value came from.

Edit 1: I was testing the code using storybook with quasar previously q-footer doesn't seem to work. Later I decided to test out the code in the quasar environment and q-footer works. However, if the footer is another customised component imported, it does not seem to work as well and now there are no errors generated.

Edit 2: I think it's with storybook that is causing to not be shown. But I am not sure how to resolve this to to show.

<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>
quasar-framework storybook vuejs3
1 Answers

try setup-based style;

<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>
user_131975480
Related