Unable to close sidebar

UI Components for Vue
Post Reply
Nargzul
Posts: 23
Joined: 21 Apr 2017, 14:30

04 Jul 2021, 11:28

Hi,

I'm starting to use PrimeVue, and now i'm setuping my layout.

My main component is as follow:

Code: Select all

<template>
  <main>
    <TopBar @show-side-bar="showSideBar" />
    <Sidebar :visible="menuVisible">
      <SideMenu></SideMenu>
    </Sidebar>
    <router-view />
  </main>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Sidebar from 'primevue/sidebar'

export default defineComponent({
  components: { Sidebar },
  setup() {
    const menuVisible = ref(false)
    const showSideBar = async () => {
      menuVisible.value = true
    }
    return { menuVisible, showSideBar }
  },
})
</script>
The topBar event is triggered by a Button. The bar gets properly displayed, but then I'm unable to close it by clicking elsewhere. What did I miss?

Also, I'm not using primeicons, is there a way to personalize how and where the close button is shown?

Nargzul
Posts: 23
Joined: 21 Apr 2017, 14:30

04 Jul 2021, 18:05

I solved my issue, apparently I was using the v-bind directive while I should have used v-model

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests