时间戳

首页 > 解决方案 > Vuejs vue-property-decorator 数据字段声明

typescript - Vuejs vue-property-decorator 数据字段声明

问题描述

Vue 新手。

利用vue-property-decorator& 也试过了vue-class-component。

根据 github ( https://github.com/kaorun343/vue-property-decorator )，data对象在类中明确声明，例如ecosystem：

  import {Component, Vue} from 'vue-property-decorator';

  @Component({
     components: {}
  })
  export default class HelloWorld extends Vue {
      ecosystem: [
        {
          text: 'vuetify-loader',
          href: 'https://github.com/vuetifyjs/vuetify-loader'
        },
        {
          text: 'github',
          href: 'https://github.com/vuetifyjs/vuetify'
        },
        {
          text: 'awesome-vuetify',
          href: 'https://github.com/vuetifyjs/awesome-vuetify'
        }
      ] 
  }

代替

  data() {
    return {
      ecosystem: ['bla', 'bla', 'bla']
    }
  }

但是，当我尝试使用它时，出现错误Property or method "ecosystem" is not defined on the instance but referenced during render.

打电话给

  created() {
    console.log(this.ecosystem)
  }

也返回undefined

我错过了什么？

标签： typescriptvue.jsvuejs2

解决方案

查看运行示例：https ://codesandbox.io/s/y2nop643xv

像这样声明生态系统：

ecosystem: any = [
    {
      text: "vuetify-loader";
      href: "https://github.com/vuetifyjs/vuetify-loader";
    },
    {
      text: "github";
      href: "https://github.com/vuetifyjs/vuetify";
    },
    {
      text: "awesome-vuetify";
      href: "https://github.com/vuetifyjs/awesome-vuetify";
    }
  ];

还有一点提示，尽量避免使用 any，你正在使用 typescript，使用 typed objects

推荐阅读