Triggering component from outside

user_15691725 0
Viewed 25

So I am trying to create a re-usable modal component. How can I acctually pass the toggleModal v-if thing to be triggered from outside the component? Also, I do not want a situation, where I got 2 modals in one components, and by triggering one, it opens all of them instead of only the one I clicked on. How should I approach this?

<div class="modal" v-if="toggleModal">
..content
</div>

 props: {
    title: {
      type: String,
      default: 'Title',
    },
  },
  setup() {
    let toggleModal = ref(true)

    return { toggleModal }
  },
vuejs2 vuejs3 vue.js
1 Answers

You can add another prop that is toggleModal and that way when it's changed in the parent it's directly changed in the child In the parent component:

<template>
    <Modal :toggleModal="toggleModal1" v-on:ok="toggleModal1=false" />
    <Modal :toggleModal="toggleModal2"/>
</template>

data() {
    return{
        toggleModal1: false,
        toggleModal2: true,
    }
}

In the child component:

 props: {
    title: {
      type: String,
      default: 'Title',
    },
    toggleModal: {
      type: Boolean,
      default: false,
    },
  },
user_136615570
Related