CODEWITHSUNDEEP
typescriptvue.jsvuejs2vue-componentnuxt.js
user479947
user479947

Reputation:

Component v-if statement with properties in Nuxt / Vue (Typescript)

I have a component that I'd like to conditionally render based on a property:

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

This generates the error: 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

What's the easiest way to set & reference my showLogo property?

Upvotes: 1

Views: 3546

Answers (1)

spadarian
spadarian

Reputation: 1624

I've never used vue-property-decorator but based on the documentation, you are missing a few things.

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

Upvotes: 1

Related Questions