I've been attempting to utilize the default Quasar card component in order to display data received from props. Unfortunately, I haven't had any success as my component remains empty and I keep encountering various errors with each attempt.
Recently, I've come across errors such as "TypeError: Cannot read properties of null (reading 'character')" and "defineProps() is a compiler-hint helper that is only usable inside of a single file component. Its arguments should be compiled away and passing it at runtime has no effect".
Can someone help me figure out what mistake I'm making here?
<template>
<q-card class="my-card" flat bordered>
<q-card-section horizontal>
<q-img class="col-5" src="https://cdn.quasar.dev/img/parallax2.jpg" />
<q-card-section> {{ props.character }} </q-card-section>
</q-card-section>
</q-card>
</template>
<script lang="ts">
import { defineComponent, defineProps, PropType } from 'vue';
import { Character } from './models';
export default defineComponent({
name: 'CardComponent',
setup() {
const props = defineProps({
character: Object as PropType<Character> | null,
});
return {
props,
lorem: 'Lorem ipsum dolor sit amet, blah blah blah',
};
},
});
</script>
<style lang="sass" scoped>
.my-card
width: 100%
max-width: 350px
</style>