I want to get the child elements of the parent component.
<div
v-on:click.stop.prevent="onClickTemplateHandler">
<div>
<h3 style="">Title</h3>
<p>{{ lorem }}</p>
</div>
</div>
...
onClickTemplateHandler(e) {
console.log(e)
const innerHTML = e.target.innerHTML
if (innerHTML) {
this.value += innerHTML
}
}
I've tried to use .self, but I still want the inner of the div be clickable
But, when I click the inside of the div, I am getting the child as the target instead of the parent.
Any suggestion for this one?
Thanks!
I did some workaround
<div>
<div class="overlay" v-on:click.stop.prevent="onClickTemplateHandler"></div>
<div>
<h3 style="padding: 10px;text-align: center;">Header</h3>
</div>
</div>
...
onClickTemplateHandler(e) {
const innerHTML = e.target.nextElementSibling.innerHTML
if (innerHTML) {
this.value += innerHTML
}
}
...
.overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
z-index: 2;
top: 0px;
cursor: pointer;
}