«Свойство или метод« foo »не определен в экземпляре, но на него ссылаются во время рендеринга» Vuejs Typescript - PullRequest
Новая
       7

«Свойство или метод« foo »не определен в экземпляре, но на него ссылаются во время рендеринга» Vuejs Typescript

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

Свойство или метод "foo" не определены в экземпляре, но на них ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Я работал с vuejs, теперь я перехожу к машинописи, обращенной к этомупроблема, связанная с попыткой получить доступ к простому свойству и сделать его реактивным.

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

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

Я попытался обойти это, добавив свойство в качестве реквизита, но из-за этого я получаю сообщение об ошибке: каков правильный способ попробовать это?

Избегайте прямого изменения свойства, так как значение будет перезаписываться при каждом повторном рендеринге родительского компонента.Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита.Опора изменена: "foo" 

 @prop()
 private foo: string;

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