Hey there, I'm currently utilizing Vue along with typescript and facing an issue with props in v-for where it's not rendering anything. Check out the code snippet below for reference
I've experimented with computed props, setting default values to the list, and even creating a new variable instantiated in various lifecycle hooks like constructor or mounted, but the rendering only works when I explicitly define the list like this:
@Prop() list!: string[] = ['foo', 'bar']The error message I encounter is: "Property or method 'list' is not defined on the instance but referenced during render." The styles for the menu are rendered, but the actual list items are missing:
<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>