Mixin data don't seem to be available to initialize Component data.
In the below fiddle, App is using MyMixin. mixinMessage is available in created() hook but not in data initialization. What am I doing wrong?
https://jsfiddle.net/rb81qp5a/2/
const { default: Component, Mixins } = VueClassComponent
@Component()
class MyMixin extends Vue {
mixinMessage = 'mixin message'
}
@Component({
template: `
<div>
<h1>Message 1: {{ message1 }}</h1>
<h1>Message 2: {{ message2 }}</h1>
</div>
`,
mixins: [MyMixin]
})
class App extends Vue {
message1 = this.mixinMessage
message2 = ''
created() {
this.message2 = this.mixinMessage
}
}
new Vue({
el: '#app',
render: h => h(App)
})
Example without vue-class-component: https://codepen.io/anon/pen/PLdmWE
- Mixin property (init) is empty but expected to be "Mixin property"
- Mixin property (created) is "Mixin property" as expected
