首页 文章

基于Vue类的组件警告:属性未在实例上定义,但在呈现期间引用

提问于
浏览
3

我正在尝试使用vue-class-component和typescript(在这里找到https://github.com/vuejs/vue-class-component)创建一个vue组件 . 根据我的理解,数据是在类中定义的,正如我在下面所做的那样 - 但是我收到了错误:

"[Vue warn]: Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property."

这是我的实际代码的精简版本,但它仍然不起作用:

<template>

  <div id="vue-test">
    <input v-model="test"/>
    {{test}}
  </div>

</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
})
export default class AppearanceDialogVue extends Vue {
  public test: string = '100';
}

</script>

编辑:似乎将'测试声明'更改为

public test: string;

工作

1 回答

  • 2

    以下是此问题的解决方案,需要添加构造函数并在构造函数中初始化该属性

    <template>
    <section class="dropdown" style="background-color: #dde0e3">
      <select class="btnList" v-model="foo">
        <option v-for="item in selectedfooData" :value="item" :key="item.id">{{item}}</option>
        </select>
        {{foo}}
      </section>
    </template>
    
    <script lang="ts">
      import { Component, Prop, Vue } from 'vue-property-decorator';
      @Component
      export default class HelloWorld extends Vue {  
      private foo: string;
      private selectedfooData : string[] = [
       'one',
       'two'
      ]
      construtor() { 
        super();
        this.foo = '';
      }
    
     }
    </script>
    

相关问题