vue.js - 将 v-for 与 v-on 一起使用 :click in a Vue Component

Question

我有一个我认为是 Vue 的基本问题，但我试图在单击时运行一个方法，同时还在组件上运行 v-for 循环。

我不确定为什么，但我无法在该点击处理程序上运行任何东西，但我在 Vue 文档中没有看到任何内容说这是不可能的。现在我会满足于让我的控制台日志运行。

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

这是 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>

我可以在组件本身中运行点击，但我需要父级清楚地知道处理选定的 bool 值所发生的事情。

Answer 1

要在组件标签中使用原生事件，你应该添加 .native 修饰符

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

检查 this guide .

要检查它，我建议您创建一个方法并在其中添加 console.log()。