在 Nuxt / Vue (Typescript) 中具有属性的组件 v-if 语句

Posted 2023-02-23

【中文标题】在 Nuxt / Vue (Typescript) 中具有属性的组件 v-if 语句

【英文标题】：Component v-if statement with properties in Nuxt / Vue (Typescript)

【发布时间】：2018-07-28 03:11:40

【问题描述】：

我有一个想要基于属性有条件地渲染的组件：

<template>
<div class="logoContainer" v-if="showLogo">
  LOGO
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import  Prop  from 'vue-property-decorator'

export default class extends Vue 
  @Prop(default: true)
  showLogo: boolean

</script>

这会产生错误：Property or method "showLogo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

设置和引用我的showLogo 属性的最简单方法是什么？

【参考方案1】：

我从未使用过vue-property-decorator，但根据文档，您遗漏了一些东西。

<template>
<div class="logoContainer" v-if="showLogo">
  LOGO
</div>
</template>

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

@Component
export class MyComponent extends Vue 
@Prop(default: true)
showLogo: boolean

【讨论】：

谢谢！那成功了。我正在导入 Vue 并导出组件，但缺少关键部分——@Component。有趣的是，除了推荐阅读 Declaring-Reactive-Properties 文档之外，它运行时不会出错。