Vue class based component Cannot read property 'message' of null"

Question

I am trying to use typescript along with Vue (I am new at it) in my vue but having issue as it seems like it is scope problem. I might be wrong. I took small example from VueJS and made it like following

Cannot read property 'message' of null"

<template>
    <button @click="onClick">Click!</button>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'

  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}
</script>

What am I missing?

MJ_Wales · Accepted Answer · 2019-11-19 11:46:35Z

2

You missed the component decorator before defining MyComponent:

@Component
export default class MyComponent extends Vue {

}

answered Nov 19, 2019 at 11:46

MJ_Wales

9052 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

localhost Over a year ago

oh wow. It is confusing when ur jumping from just Vue to vue typescript. Does it change more if we r using Vuex? Any good tutorial? As my script is more complicated, I still get the error. I wonder how we bind input types with properties.

MJ_Wales Over a year ago

Vuex with typescript was a bit of a pain to setup due to lack of tutorials. I recommend looking for example projects on github, that helped me the most.

localhost Over a year ago

thanks, the thing I don't understand is why some ppl use Vue.extend and some use class MyClass extends Vue

MJ_Wales Over a year ago

I think Vue.extend is the only option available if using javascript, so if you're moving an existing code base over to typescript then its probably easier to keep using it. Class based components are exclusive to typescript (I think) and result in cleaner and more readable code which is understandable by anyone familiar with classes (my opinion).

localhost Over a year ago

so One need to be well versed with OOP in order to do good TS? Just asking for recommendation

Collectives™ on Stack Overflow

Vue class based component Cannot read property 'message' of null"

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related