时间戳

首页 > 解决方案 > 如何在不“自动”执行的情况下 v-bind 方法？

vue.js - 如何在不“自动”执行的情况下 v-bind 方法？

问题描述

我尝试使用包“vue2-touch-events”。我现在有一个包含许多图像的列表，并希望在弹出窗口中显示它们，如果我按住图像并通过正常单击打开图像。

点击背后的逻辑没有问题。

现在我调用这样的方法：

<v-card ... v-touch:start="startHandler" v-touch:end="endHandler">
     <v-img ... >
     </v-img>
</v-card>

这就像它应该的那样工作。但我需要处理程序中的图像 id。当我像“endHandler（imageId）”一样传递它时，它总是在每个页面加载时为该列表中的每个图像执行该方法......

我怎样才能防止这种情况？

标签： vue.jsnuxt.js

解决方案

当您编写像这样的“endHandler（imageId）”处理程序时，您正在执行处理程序，而不是传递函数的指针/引用。

为了避免这种行为，您可能需要使用这样的内联（匿名）函数来包装处理程序调用：

<v-card ... v-touch:start="startHandler" v-touch:end="function() { endHandler(imageId); }">
     <v-img ... >
     </v-img>
</v-card>

推荐阅读