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
}

具有Nuxt / Vue（Typescript）属性的组件v-if语句

1 个答案: