Estoy tratando de aprender Laravel con Vuejs (v3). Tengo 3 componentes: App.vue , Navbar.vue y Sidebar.vue
Lo que estoy tratando de hacer es hacer clic en sidebar-btn :
isSidebarActive a !isSidebarActive ---- HECHOisSidebarActive ). ---- HECHOSidebar.vue (depende de isSidebarActive ) Intenté usar accesorios, pero el error dice que no puedo cambiar el valor, así que intenté usar emits , pero parece que todavía no puedo hacerlo bien.
aplicación.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')aplicación.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>Por favor, eche un vistazo al siguiente fragmento:
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>