Vue 基于类的组件警告：属性未在实例上定义，但在渲染期间引用

Posted 2023-02-23

【中文标题】Vue 基于类的组件警告：属性未在实例上定义，但在渲染期间引用

【英文标题】：Vue Class Based Component Warning: Property is not defined on the instance but referenced during render

【发布时间】：2018-12-10 21:49:11

【问题描述】：

我正在尝试使用 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;

工作

【问题讨论】：

你试过没有public和string的test = '100';吗？

您的代码为我运行而没有错误/警告。

我有同样的问题，我尝试了测试声明的所有组合，但无论我做什么都会得到错误。

【参考方案1】：

这里是解决这个问题的方法，需要添加一个构造函数并在构造函数中初始化属性

<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>

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击 进行提问。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review

抱歉，已找到解决此问题的方法，编辑了答案@JobinJoseph