Recently, I worked on a project where I utilized Nuxt.js with TypeScript as the language. In addition, I incorporated nuxt-property-decorator.
I'm currently trying to grasp the concept of the 'mixins' property in the code snippet below:
mixin.vue ↓
<template>
<div>
<p>{{hello}}</p>
</div>
</template>
<script lang="ts">
import { Component ,Vue } from 'nuxt-property-decorator'
import Mixin from "~/mixins/mixin";
@Component({
mixins:[
Mixin
]
})
export default class extends Vue{
greeting:string = 'Hello'
}
</script>
mixin.ts↓
import { Vue } from "nuxt-property-decorator";
export default class extends Vue {
greeting:string = ''
message:string = 'world'
get hello(){
return this.greeting + ' ' + this.message + '!'
}
}
I was hoping for the output to be "Hello worlds!", however, an error occurred:
Property or method "hello" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Can someone provide me with some guidance on this issue?