I have a child component called Navbar. A logout is an option in the Navbar.
<a @click="(event) => {event.preventDefault();}">
Logout
</a>
I have imported this Navbar into my parent component called Home. And in the Home component, there is a div (a modal),
<div class="modal" v-if="modal">
And this modal will show only if the modal ref is true.
<script setup>
import Navbar from './components/Navbar.vue';
import {ref} from 'vue';
const modal = ref(false);
</scipt>
My question is how to make this modal ref value to true when we click the logout option in my Navbar child component.
In the parent
<script setup>
import Navbar from './components/Navbar.vue';
import {ref} from 'vue';
const modal = ref(false);
const setModalTrue= () => this.modal.value = true;
</script>
<template>
....
<navbar @nav-event="setModalTrue">
....
</navbar>
....
</template>
in navbar
<script setup>
const emit = defineEmits(["nav-event"]);
const sendNavEvent = () => emit("nav-event");
</script>
<template>
....
<a @click.prevent="sendNavEvent">
....
</a>
....
</template>
note @click.prevent=.... - which does the preventDefault for you
You can emit from the child say Navbar.vue
<a @click="buttonClick">
Logout
</a>
and
<script setup>
const emit = defineEmits(['showModal'])
function buttonClick() {
emit('showModal', true)
}
</script>
and then you would have used the Navbar.vue in parent like
<Navbar @showModal="setModalVisibility" />
.
.
.
<script setup>
function setModalVisibilty() {
modal.value = true;
}
</script>
Try to emit an event from the Navbar component when you click on the logout link:
<a @click.prevent="logout">
Logout
</a>
<script setup>
import {ref} from 'vue';
const emit=defineEmits(['logout'])
const loggedIn=ref(true)
function logout(){
emit('logout',!loggedIn.value)
}
</scipt>
in parent :
<Navbar @logout="onLogout" />
<script setup>
import Navbar from './components/Navbar.vue';
import {ref} from 'vue';
const modal = ref(false);
function onLogout(logged){
modal.value=logged
}
</scipt>