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

No content sent in the request body while implementing fetch

Transformation of Array of Objects to Array of Values using Node.js

Limit the selected values to calculate a partial sum

Best practices for updating the value of a specific key within an object that contains recursion in JavaScript/TypeScript

Utilizing HTML5 data attributes to store intricate JSON objects and manipulate them using JavaScript

Issue: ReactJS + MaterialUI + TypeScript - Property 'component' does not exist?Possible error in ReactJS: component property is

Exploring error management in Vue3 and Vite when deploying to production

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

Check out the selected values in Ionic 3

dc.js bar graph bars blending together

Transfer the cropped image to the database through AJAX on the client side and PHP on the server side

Adding a new column to a table that includes a span element within the td element

How can I convert an object array back into an iterated collection after using the find() method in MongoDB?

Unraveling Vue Async Components - Harnessing the power of emitted events to resolve

Encountering a CORS policy issue while attempting to retrieve data from an API

The `stream.Transform.unshift()` method in Node.js

Sending a multitude of variables using strings, evaluating them through various functions, and incorporating a variety of methods

Testing Vue's disabled input using Vuetify

Unable to import createBatchingNetworkInterface from apollo-client

Unfortunately, CORS is preventing me from sending a POST request through AJAX