Vue Prop не определен и / или не может быть использован в v-for. Использование машинописи и декораторов - PullRequest
Новая
       36

Vue Prop не определен и / или не может быть использован в v-for. Использование машинописи и декораторов

0 голосов
/ 30 октября 2019

Ну, я использую Vue с машинописью и пытаюсь использовать реквизит с помощью v-for, но он ничего не рендерит. Код ниже

Я пробовал вычисленные реквизиты, также давая значения по умолчанию списку и создавая новую переменную, создаваемую в конструкторе, даже в монтируемом, но толькоработает, когда я создаю экземпляр списка следующим образом: @Prop() list!: string[] = ['foo', 'bar']

Мой код выдает следующую ошибку: «Свойство или метод« список »не определен в экземпляре, но на него ссылаются во время рендеринга». (он отображает стили для меню, но не для списка): 

<template>
  <div class="home">
    <window-menu :list="['foo', 'bar']" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import WindowMenu from "@/components/WindowMenu.vue";

@Component({
  components: {
    WindowMenu
  }
})
export default class Home extends Vue {}
</script>


<template>
  <div class="window-menu">
    <ul class="window-list">
      <li v-for="(item, index) in list" v-bind:key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Prop, Vue, Watch } from "vue-property-decorator";

export default class Menu extends Vue {
  @Prop() private list!: string[];
}
</script>

1 Ответ

1 голос
/ 01 ноября 2019

Я исправил это. Ну, ошибка была в том, что я не использовал декоратор @Component, тогда Vue не смог скомпилировать реквизиты. Код исправлен ниже . 

<script lang="ts">
import { Prop, Vue, Component} from "vue-property-decorator";

@Component
export default class Menu extends Vue {
  @Prop() private list!: string[];
}
</script>
...