[Vuejs]-Possible to trigger the same true false event on two different component instances independently

by

0👍

You definitively need 2 separate states in the parent component.

E.g. contentBox1isActive and contentBox2isActive instead of just isActive.

Or you use an array of component identifiers, like

isActive = [ contentBox1, ... ]

Alternatively you could use a similar array to hold the necassary attributes an display the dialog components with a <div v-for=...> directive..

To close the correct component you can either define separate close Handlers, like

closeComponent1(){ ... },
closeComponent2(){ ... },

or you give each component an identifier, pass that to the components event emitter, which passes it back to the event handler.
E.g.:

// parent:

<popup componentId="component1" ... @close="closeHandler">
...
closeComponent( componentId ){ ... },

// component:

props: {
    componentId: String,
},
...    
this.$emit('close', this.componentId)

Leave a comment