Vue Prop 未定义，和/或不能在 v-for 上使用。使用打字稿和装饰器

Posted 2023-02-23

【中文标题】Vue Prop 未定义，和/或不能在 v-for 上使用。使用打字稿和装饰器

【英文标题】：Vue Prop not defined, and/or cannot be used on v-for. Using typescript and decorators

【发布时间】：2020-02-25 05:52:35

【问题描述】：

嗯，我正在使用带有 typescript 的 Vue，并尝试使用带有 v-for 的 props，但它什么也没渲染。 代码如下

我已经尝试过计算道具，还为列表提供默认值并创建一个在构造函数上实例化的新变量，甚至在挂载时，但它仅在我实例化列表时有效：@Prop() list!: string[] = ['foo', 'bar']

我的代码出现以下错误：“属性或方法 'list' 未在实例上定义，但在渲染期间被引用。” （它呈现菜单而不是列表的样式）：

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

【问题讨论】：

您的组件已导入为WindowMenu，但您的模板有<menu>。尝试使用<window-menu :list="['foo', 'bar']" /> 或<WindowMenu :list="['foo', 'bar']" />

我在编辑问题时删除了“窗口”，但它在代码上是正确的。我的错，我会解决这个问题。

【参考方案1】：

我解决了这个问题。好吧，错误是我没有使用 @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>