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

Question

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

<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 属性的最简单方法是什么？

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