[Vuejs]-Vue initializing props to data for mutation but Error in data(): "TypeError: Cannot read property 'propsTitle' of undefined"

by

5👍

This:

data: () => ({
    ...
})

Should be this:

data () {
    ...
}

If you use an arrow function you’ll end up with the this reference pointing at the wrong object.

There is a note about this in the docs: https://v2.vuejs.org/v2/api/#data

Note that if you use an arrow function with the data property, this won’t be the component’s instance…

👤skirtle

0👍

Here is the corrected code. You have to use a function with return.

  props: {
    propsTitle: String, 
    propsLevel: Number,
    propsProgress: Number,
  },

  data() {
    console.log(this)
    return { 
      title: this.propsTitle,
      progress: this.propsProgress,
      level: this.propsLevel,
      activeBtnTxt: "Start",
      isStarted: false
    }
  },
👤phongyewtong

Leave a comment