typescript - "Property or method "foo "is not defined on the instance but referenced during render"Vuejs typescript

Question

Property or method "foo" 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.

我曾使用过 vuejs，现在我正在转向面对这个问题的 typescript ，以尝试访问一个简单的属性并使其具有反应性。

有人问过类似的问题，但还没有解决方案: Vue Class Based Component Warning: Property is not defined on the instance but referenced during render

<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'
     ]
 }
</script>

我已经尝试通过将属性添加为 prop 来解决这个问题，但这给了我错误提示，那么尝试这个的正确方法是什么？

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "foo"

 @prop()
 private foo: string;

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