I'm trying to learn Laravel with Vuejs (v3).
I have 3 components: App.vue, Navbar.vue, and Sidebar.vue
What I'm trying to do is, onclick of sidebar-btn:
isSidebarActive to !isSidebarActive ---- DONEisSidebarActive). ---- DONESidebar.vue (dependent on isSidebarActive)I tried using props but error says I can't change the value, so I tried using emits but I still can't seem to get it right.
app.js
require('./bootstrap');
import { createApp } from 'vue'
import App from './App.vue'
import router from './routes'
// Partials
import Navbar from './components/Navbar.vue'
import Sidebar from './components/Sidebar.vue'
createApp(App)
.component('navbar', Navbar)
.component('sidebar', Sidebar)
.use(router)
.mount('#app')
App.vue
<template>
<navbar></navbar>
<sidebar v-bind:class="{ active: isSidebarActive }"></sidebar>
<router-view></router-view>
</template>
<script>
export default {
name: "App",
data() {
return {
isSidebarActive: false,
};
},
}
</script>
Navbar.vue
<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm sticky-top">
<div class="container">
<div class="navbar-brand" >
<span class="h4">
Hello World!
</span>
<!-- Button to toggle Sidebar -->
<span class="btn btn-outline-light btn-sm ms-2" id="sidebar-btn" style="border: 1px white" @click="toggleSidebar()">
<i v-bind:class="[isSidebarActive ? 'fas fa-arrow-left' : 'fas fa-bars']" title="Sidebar Menu"></i>
</span>
</div>
</div>
</nav>
</template>
<script>
export default {
name: "Navbar",
data() {
return {
isSidebarActive: false,
};
},
emits: ['isSidebarActive'],
methods: {
toggleSidebar:function () {
this.isSidebarActive = !this.isSidebarActive
this.$emit("isSidebarActive", this.isSidebarActive)
},
},
}
</script>
Please take a look at following snippet:
const app = Vue.createApp({
data() {
return {
isSidebarActive: false,
};
},
methods: {
handleSidebar() { // 👈 handle received event
this.isSidebarActive = !this.isSidebarActive
}
}
})
app.component('Sidebar', {
template: `<div>sidebar</div>`
})
app.component('Navbar', {
template: `
<div>Hello World!<button @click="toggleSidebar()">show/hide sidebar</button></div>
`,
methods: {
toggleSidebar() {
this.$emit("toggle") // 👈 emit event
},
},
})
app.mount('#demo')<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
<!-- 👇 listen to event from child, call method -->
<navbar @toggle="handleSidebar"></navbar>
<!-- 👇 conditionaly show/hide component -->
<sidebar v-if="isSidebarActive"></sidebar>
</div>