A vue mixin is being used to store information (referred as `world` in the example below) that needs to be accessed in multiple vue components without having to import it every time.
Check out the code snippet:
<template>
<ol>
<li>Hello {{ world }}</li>
<li>{{ greeting }}</li>
<li>{{ greeting2 }}</li>
</ol>
</template>
<script lang="ts">
import { Component, Mixins, Vue } from 'vue-property-decorator'
@Component
class MyMixin extends Vue {
world = 'world'
}
@Component
export default class Home extends Mixins(Vue, MyMixin) {
greeting = 'Hello ' + this.world
greeting2 = ''
created() {
this.greeting2 = 'Hello ' + this.world
}
}
</script>
The output on the page is as follows:
1. Hello world
2. Hello undefined
3. Hello world
Why does the 2nd item show "Hello undefined"? Is this intentional behavior? Any alternative ways to avoid this issue besides the workaround mentioned for the 3rd item?