具有 Nuxt / Vue 属性的组件 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
}