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

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

0 голосов
/ 31 декабря 2018

Я новичок в Vue Framework и пытаюсь создать несколько примеров компоновки с использованием компонентов, но у меня возникла проблема при попытке выполнить код: 

"Property or method "icons" is not defined on the instance but referenced during render. Make sure that this property is reactive"

В шаблоне у меня есть:

<template>
  <div>
    <h1>Welcome a la nueva pagina</h1>
    <div v-for="icon in icons">{‌{ icon }}</div>
  </div>
</template>

В файле с именем Footer.ts у меня есть следующий код: 

import {Component, Vue} from "vue-property-decorator";
import Template from './Footer.vue';

@Component({
    mixins: [Template]
})
export default class Footer extends Vue {
    public icons!: string[];

    constructor() {
        super();
        this.icons = [
            'fab fa-facebook',
            'fab fa-twitter',
            'fab fa-google-plus',
            'fab fa-linkedin',
            'fab fa-instagram'
        ];

        console.log('Footer renderizado');
        this.icons.map((icon) => console.log(icon));
    }
}

Наконец, в App.vue у меня есть: 

<template>
  <div>
    <h1>Pagina principal</h1>
    <footer></footer>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import Footer from '@/component/Footer';

  @Component({
      components: {
          Footer
      }
  })
  export default class App extends Vue {
      mounted() {
          console.log("ensamblado terminado");
      }
  }
</script>

На случайиз Footer.ts конструктор никогда не вызывается.

Спасибо

Ответы [ 3 ]

0 голосов
/ 31 декабря 2018

Эта ошибка возникает, когда переменная или метод не определены в экземпляре компонента, а на него ссылается сторона его шаблона.

В приведенном выше примере кода переменная icons используется в forцикл, но не объявляется для данных компонента.

Если вы проверите vue-property-decorators library документации , вы не увидите примеров использования метода constructor внутри компонентов Vue.Потому что это недопустимый способ объявить свойства компонента.

Так как вместо этого data свойства должны быть объявлены непосредственно в экземпляре, например: 

export default class Footer extends Vue {
  icons: string[] = [
    'fab fa-facebook',
    'fab fa-twitter',
    'fab fa-google-plus',
    'fab fa-linkedin',
    'fab fa-instagram'
    ]
  }
}
0 голосов
/ 01 января 2019

Наконец-то я смог решить проблему.Проблема была просто, внутри папки MyComponent, которая у меня есть, машинописный файл и HTML-файл с именами MyFooter.ts и MyFooter.vue.Переименование MyFooter.ts в component.ts и MyFooter.vue в template.vue работает отлично.Я понятия не имел, о компонентах и ​​шаблоне нужно так называть

0 голосов
/ 31 декабря 2018

В большинстве случаев вы получаете эту ошибку, потому что Vue пытается получить доступ к значению переменной, которая не существует.Другими словами, вам нужно убедиться, что соответствующая переменная объявлена ​​и, в идеале, определена, прежде чем Vue попытается отобразить ваш компонент.Кроме того, вся процедура получения / установки с реактивными значениями работает только для переменных, которые явно определены в data.Вы не можете волшебным образом прикрепить переменную something к контексту this и ожидать, что она будет работать правильно.Для большего, я рекомендую ссылаться на документы .

...