Updating the parent's reference from a child component in Vue 3

Question

Updating the parent's reference from a child component in Vue 3

In one of my child components, I have a component named Navbar that includes an option for logging out.

<a @click="(event) => {event.preventDefault();}">
  Logout 
</a>

This Navbar component has been imported into my parent component called Home. Within the Home component, there is a div serving as a modal:

<div class="modal" v-if="modal">

The modal will only display when the modal reference is set to true.

<script setup>
import Navbar from './components/Navbar.vue';
import {ref} from 'vue';

const modal = ref(false);

</scipt>

I am curious about how to change the value of the modal reference to true when the user clicks the logout option in the Navbar child component.

javascript vue.js vuejs3 vue-composition-api vue-script-setup

Answer 1

Answer №1

Within the main component

<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>

inside navbar component

<script setup>
   const emit = defineEmits(["nav-event"]);
   const sendNavEvent = () => emit("nav-event");
</script>
<template>
    ....
    <a @click.prevent="sendNavEvent">
    ....
    </a>
    ....
</template>

observe @click.prevent=.... - it handles the preventDefault functionality automatically

Answer 2

Within the main component

<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>

inside navbar component

<script setup>
   const emit = defineEmits(["nav-event"]);
   const sendNavEvent = () => emit("nav-event");
</script>
<template>
    ....
    <a @click.prevent="sendNavEvent">
    ....
    </a>
    ....
</template>

observe @click.prevent=.... - it handles the preventDefault functionality automatically

Answer 3

Answer №2

To trigger an event from the child component, you can add the following code to your Navbar.vue:

<a @click="buttonClick">
  Logout 
</a>

Inside the script setup tag of Navbar.vue:

<script setup>
const emit = defineEmits(['showModal'])

function buttonClick() {
  emit('showModal', true)
}
</script>

Then, in the parent component where you want to use Navbar.vue:

<Navbar @showModal="setModalVisibility" />
.
.
.

<script setup>
function setModalVisibilty() {
  modal.value = true;
}
</script>

Answer 4

To trigger an event from the child component, you can add the following code to your Navbar.vue:

<a @click="buttonClick">
  Logout 
</a>

Inside the script setup tag of Navbar.vue:

<script setup>
const emit = defineEmits(['showModal'])

function buttonClick() {
  emit('showModal', true)
}
</script>

Then, in the parent component where you want to use Navbar.vue:

<Navbar @showModal="setModalVisibility" />
.
.
.

<script setup>
function setModalVisibilty() {
  modal.value = true;
}
</script>

Answer 5

Answer №3

Make sure to trigger an event from the Navbar element when the logout link is clicked:

<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>

Within the parent component:

<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>

Answer 6

Make sure to trigger an event from the Navbar element when the logout link is clicked:

<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>

Within the parent component:

<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>

Updating the parent's reference from a child component in Vue 3

Answer №1

Answer №2

Answer №3

Similar questions

The issue I am experiencing within my PHP code is that the redirection to the gratitude page is not functioning correctly when utilizing

Issue encountered when AngularJS struggles to evaluate regular expression within ng-pattern

Sending both an array and an image via Ajax in a single request

What is the most effective way to inform the user when the nodeJS server can be accessed through socketIO?

Tips for effectively utilizing the display:none property to conceal elements and permanently eliminate them from the DOM

Skipping code in JavaScript/jQuery function on window load

What is the best way to prevent users from clearing the value attribute of an input element?

Is it possible to transform an array of objects into a new array of objects?

Does Framework7 have an equivalent to Vue's router.beforeEach() method?

Javascript/Webpack/React: encountering issues with refs in a particular library

The ng-repeat function is iterating through the array multiple times

Modify content or display picture within accordion panel based on its identifier

Encountering permission issues while attempting to add `@nuxtjs/sentry` in a Docker container running Node 16.14. Installation

Achieving functionality with a fixed header

ExpressJS encountered an error due to an unsupported MIME type ('text/html') being used as a stylesheet MIME type

Is it possible for a React application to manage errors (status code 4xx) using a try-catch block

Get the PDF in a mobile app using HTML5 and Javascript

Is there a way to achieve this without relying on Ext.getCmp in this particular code snippet?

Ways to execute a JavaScript function upon a button click instead of during the page load completion

Is it necessary for me to replicate this function? - jQuery