How can I add a click handler in Vue used in Laravel? - laravel

Question

In my Laravel application, I have made a component in Vue. The component itself is rendering properly, but the click handler is not firing. I have read many articles on the issue, but can't find the solution.(https://prnt.sc/tyiwmh + https://prnt.sc/tyiwwb + https://prnt.sc/tyix8l)
<template>
<div class="item border rounded-lg p-3">
<header>
<h2 class="mb-3">John Doe</h2>
<div class="arrows" v-on:click="showContent">
<img src="storage/img/chevron-down-light.svg" alt="" class="arrow-down">
<img src="storage/img/chevron-up-light.svg" alt="" class="arrow-up">
</div>
</header>
<div class="item-content" v-if="visible">
<div class="content-1">
<ul>
<li><b>Email:</b> john.doe#hotmail.com</li>
<li><b>Tel:</b> 0497 99 88 77</li>
</ul>
</div>
<hr>
<div class="content-2">
<ul>
<li><b>Vertrekplaats:</b> Ark van Noë</li>
<li><b>Aankomstplaats:</b> Watermolen Grobbendonk</li>
</ul>
</div>
<hr>
<div class="content-3">
<ul>
<li>2 enkelzitkajaks</li>
<li>3 dubbelzitkajaks</li>
<li>0 canadese kano's</li>
<li>2 zwemvesten</li>
<li>3 tonnetjes</li>
</ul>
</div>
<hr>
<div class="content-4">
<h3>Extra info:</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt fuga dignissimos hic? Velit, ea aliquam! Consequuntur provident vitae, hic repudiandae, animi, ipsa ullam quidem accusamus vero ipsum aut porro nostrum.
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
visible: false
}
},
methods: {
showContent: function() {
console.log('the button is clicked');
}
}
}
</script>

Answer 1

This might help no method necessary:
<div class="arrows" #click="visisble = !visible">
<img #click="visisble = !visible"
:src="'storage/img/chevron-' + (visible ? 'down-light.svg':'up-light.svg')"
alt=""
:class="'arrow-' + (visible ? 'down' : 'up' )">
</div>