基于Vue类的组件无法读取null的属性“消息"" [英] Vue class based component Cannot read property 'message' of null"

问题描述

我正在尝试在我的 vue 中使用 typescript 和 Vue(我是新手)，但有问题，因为它似乎是范围问题.我可能错了.我从 VueJS 中取了一个小例子，并使其像以下

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

无法读取 null 的属性 'message'"

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>

我错过了什么?

推荐答案

你在定义 MyComponent 之前错过了组件装饰器:

You missed the component decorator before defining MyComponent:

@Component
export default class MyComponent extends Vue {

}

这篇关于基于Vue类的组件无法读取null的属性“消息""的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！