Using v-for with v-on:click in a Vue Component

Question

I have what I think is a basic question for Vue, but I'm trying to run a method on click while also running a v-for loop on a component.

I'm not sure why but I can't get anything to run on that click handler but I see nothing in the Vue documentation saying that this isn't possible. Right now I'd settle for getting my console log running.

<IconBox
    v-for="step in steps"
    :key="step.slug"
    :step="step"
    :formData="formData"
    @click="console.log('click')"
/>

Here is the template for IconBox.vue:

<template>
  <div class="icon-box">
    <div
      class="icon-holder"
      :style="{ backgroundImage: 'url(' + step.image + ')' }"
    >
    </div>
    <div class="text">
      <div class="inner">
        <h5>{{ step.name }}</h5>
        <p v-if="step.description">{{ step.description }}</p>
        {{ isSelected }}
      </div>
    </div>
  </div>
</template>

I could run the click in the component itself but I need the parent well aware of what's happening to handle a selected boolean.

Answer 1

To use native events in component tags you should add .native modifier

<IconBox @click.native="yourMethod"/>

Check this guide.

To check it I suggest you to create a method and add console.log() inside it.