Typescript &引用；属性或方法“；"富",；未在实例上定义，但在渲染期间引用；Vuejs类型脚本

实例上未定义属性或方法“foo” 但在渲染期间被引用。请确保此属性为 反应式，无论是在数据选项中，还是对于基于类的组件 正在初始化属性

我曾经与vuejs合作过，现在我正转向typescript来解决这个问题，因为我试图访问一个简单的属性并使其成为被动的

已经提出了类似的问题，但尚未找到解决方案：

---

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

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

{{item}}
{{foo}}
从“Vue属性装饰器”导入{Component，Prop，Vue}；
@组成部分
导出默认类HelloWorld扩展Vue{
私有foo:string；
private selectedfooData:字符串[]=[
"一",，
“两个”
]
construtor（）{
超级（）；
this.foo=''；
}
}

您是否尝试在vue的

数据

对象中添加

foo

？这是基于

类的

方法，因此不存在

数据对象

，我们需要定义一个构造函数@蒂莫上尉

 @prop()
 private foo: string;

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