Javascript 在EventListener中使用vue.js方法单击其他方法

我有一个vue.js脚本，它在一个方法中生成一个元素“lens”。 现在，我想添加一个EventListener，在单击镜头元素时调用另一个方法

问题：
我尝试了两种不同的方法来添加侦听器

1:

lens.addEventListener（“单击”，此为.openLightbox（src））

工作，但在页面加载时执行，而不是在单击时执行

2:
lens.addEventListener（“单击”，函数（）{this.openLightbox（src）}，false）

在单击时执行，而不是在有效负载上执行，但抛出错误：
uncaughttypeerror:this.openLightbox不是函数

问题：

如何在缩放方法中调用lightbox方法？如果我将lightbox方法中的代码作为一个函数复制到zoom方法本身中，我确实可以工作，但是因为lightbox方法也被其他元素调用，这将导致重复代码

以下是完整的代码：


initVue（目标：字符串）：无效{
this.vue=新的vue({
el:“#”+目标，
商店，
分隔符：vueDelimiters，
数据：{
},
方法：{
openLightbox（src）{
console.log（src）；
},
图像缩放（src）{
lens=document.createElement（“DIV”）；
//工作，但在页面加载时执行，而不是在单击时执行
lens.addEventListener（“单击”，this.openLightbox（src））；
//在单击时执行，而不是在有效负载上执行，但抛出错误：UncaughtTypeError:this.openLightbox不是函数
lens.addEventListener（“单击”，函数（）{this.openLightbox（src）}，false）；
}
}
});
}
您必须将
此
附加到匿名函数，如下所示：

lens.addEventListener("click", function() { this.openLightbox(src) }.bind(this), false);

var self = this;
lens.addEventListener("click", function() { self.openLightbox(src) }, false);

或者在语句之前定义别名，如下所示：

lens.addEventListener("click", function() { this.openLightbox(src) }.bind(this), false);

var self = this;
lens.addEventListener("click", function() { self.openLightbox(src) }, false);

否则，
此
将不会引用您需要的父上下文。
包含“this.openLightbox（src）”的“function（）{…}”中的“this”不是您所认为的。在函数之前添加'var self=this'，并使用'self.openLightbox（src）'哦，哇，你完全正确！