1

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
jaudo
  • 2,022
  • 4
  • 28
  • 48
  • Have a look at this post — https://stackoverflow.com/questions/51873087/unable-to-use-mixins-in-vue-with-typescript#51874143 Not exactly similar but i think can solve the issue – Mohit Tilwani Mar 18 '19 at 23:08
  • Mixins do work in my code so the problem is not he same. In the post you mention they use the mixin in a method, as I do in the created() method. The point is about using mixins for data init – jaudo Mar 19 '19 at 06:59

0 Answers0