Vue.js: Trigger an @click on child component from parent component in

Question

I have a template with several divs, each containing an @click that triggers a specific function and a corresponding visual effect

<template>
    <div @click="function doThis(param1)></div>
    <div @click="function doThis(param2)></div>
    <div @click="function doThis(param3)></div>
    <div @click="function doThis(param4)></div>
    <div @click="function doThis(param5)></div>
</template>

method: {
    doThis(param) {
        lightUpDiv(corresponding param)
    }
}

I'm also calling doThis from the parent via a $broadcast. What if any, is the best Vueish way to trigger the corresponding lightUpDiv call from the $broadcast? (just use getElementById and .click()???). I used individual divs vs a v-for in the hope that this is easier.

I should note that there are several instances of the template On the page. Even if the same visual effect is caused simultaneously on all the templates that is fine. If there is a way to call them on the specific template instances that is even better.

I've spent hours trying to figure this out and cannot seem to do it. Have read all the guide and API. I know there is some way to bind the data to make the template instances unique but can't seem to get it. Definitely couldn't see the @click from $broadcast solution

Thanks for any help!!

Raj Kamal · Accepted Answer · 2016-08-22 10:40:26Z

2

<div @click="doThis"></div>

OR

<div @click="doThis($event)"></div>

Both are functionally equivalent, but second version is recommended as it is more explicit.

In javascript,

doThis: function(ev){
  //ev is event object and ev.target refers to the div you need.
  alert(ev.target.innerHTML);

}

Demo

Event object details

answered Aug 22, 2016 at 10:40

Raj Kamal

5776 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fedreg Over a year ago

Raj, thank you for this! However still unsure how I would call the doThis function and activate the corresponding div. ev.target only gets me the target triggered through the @click, no? Per your demo I would still be unable to call doThis(Is) and have it trigger the alert? Apologies if I'm missing something. Thank you.

Raj Kamal Over a year ago

define doThis as function( ev, para) and pass argument as doThis($event, ' a random para'). Now para will correspond to whatever you passed as second argument. if you call doThis($event, abc) then para will refer to this.abc

Fedreg Over a year ago

Raj, thank you for clarifying. That makes sense. I will have to play around with it a bit. Thanks for the help!

Collectives™ on Stack Overflow

Vue.js: Trigger an @click on child component from parent component in

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related