vendredi 25 septembre 2020

How to had a conditional render with a v-if in nuxt.js

I have an application that displays companies and their documents.
I would like to display a main title if no application is selected, and display the content of the application and removing the main title if an application is selected.

<template>
  <div class="container">
    <div v-if="docsAppDisplayed === false">
      <Logo />
      <h1 class="title">
        <em class="text-red-900 font-bold">D</em>ocs<em class="text-yellow-700 font-bold">C</em>loud<em class="text-purple-900 font-bold">M</em>anager
      </h1>
    </div>
    <div>
      <DocumentationCard />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      docsAppDisplayed: false
    }
  },
  computed: {
    ...mapGetters(['applications', 'selectedApp', 'documentations', 'selectedDoc'])
  },
  async mounted () {
    await this.$store.dispatch('getApplications', 'getDocumentations')
  },
  methods: {
    selectApplications (id) {
      this.$store.dispatch('selectedApp', id)
      this.docsAppDisplayed = true
    }
  }
}

</script>

I don't know why my method doesn't work. An idea, please?
I specify that I have a sidebar that returns my company names and that when I click on it I can access their documents. My problem only concerns the display of the (logo + title) or my DocumentCard.

Aucun commentaire:

Enregistrer un commentaire