CODEWITHSUNDEEP
vue.jsvuejs2vue-component
brunam
brunam

Reputation: 835

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

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.

Upvotes: 4

Views: 7487

Answers (2)

Fab
Fab

Reputation: 4657

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.

Upvotes: 8

Paul B.
Paul B.

Reputation: 153

I have been playing around with Vue lately, and here's how I solved a similar problem in my project

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

Changes to

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

Upvotes: 0

Related Questions