Предупреждение компонента на основе классов Vue: свойство не определено в экземпляре, но на него ссылаются во время рендеринга - PullRequest
Новая
       41

Предупреждение компонента на основе классов Vue: свойство не определено в экземпляре, но на него ссылаются во время рендеринга

0 голосов
/ 02 июля 2018

Я пытаюсь создать компонент vue с помощью vue-class-component и typcript (см. Здесь 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;

1012 * работал *

1 Ответ

0 голосов
/ 26 октября 2018

Вот решение этой проблемы, нужно добавить конструктор и инициализировать свойство в конструкторе 

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