将 v-for 与 v-on 一起使用：在 Vue 组件中单击

Posted 2023-02-23

【中文标题】将 v-for 与 v-on 一起使用：在 Vue 组件中单击

【英文标题】：Using v-for with v-on:click in a Vue Component

【发布时间】：2018-11-23 11:05:28

【问题描述】：

我有一个我认为是 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>

我可以在组件本身中运行单击，但我需要父级清楚地知道正在发生什么来处理选定的布尔值。

【问题讨论】：

试试@click.native。否则你的组件需要发出一个click。

【参考方案1】：

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

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

检查this guide。

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

【参考方案2】：

我最近一直在玩 Vue，这是我在项目中解决类似问题的方法

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

变化

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