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>

我可以在组件本身中运行click，但我需要父母很清楚处理所选布尔值的情况。

Answer 1

要在组件标记中使用本机事件，您应添加.native修饰符

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

检查this guide。

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

Answer 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>

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

2 个答案: