Vue 클래스 기반 구성 요소 경고: 속성이 인스턴스에서 정의되지 않고 렌더링 중에 참조됨

Vue 클래스 기반 구성 요소 경고: 속성이 인스턴스에서 정의되지 않고 렌더링 중에 참조됨

나는 vue-class 구성 요소와 typecript를 사용하여 vue 구성 요소를 생성하려고 한다(여기 https://github.com/vuejs/vue-class-component) 참조).내가 이해한 바로는, 데이터는 내가 아래에서 했던 것과 같이 클래스에 정의되어 있다. 그러나 나는 다음과 같은 오류를 받는다.

"[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;

일했다

이 문제에 대한 해결책은 다음과 같다. 생성자를 추가하고 생성자에서 속성을 초기화해야 함

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

참조URL: https://stackoverflow.com/questions/51140028/vue-class-based-component-warning-property-is-not-defined-on-the-instance-but-r