Question

我有一个vue.js脚本，可以生成一个元素＆＃39;镜头＆＃39;在一种方法。现在，我想添加一个EventListener，在单击镜头元素时调用另一个方法。

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

1：lens.addEventListener("click", this.openLightbox(src));
可以工作但是在页面加载时执行，而不是单击

2：lens.addEventListener("click", function() { this.openLightbox(src) }, false);
是在点击而不是在有效负载上执行，但抛出错误：Uncaught TypeError: this.openLightbox is not a function

问题：
如何在zoom方法中调用lightbox方法？如果我将灯箱mehtod中的代码作为函数复制到zoom方法本身，我会工作，但是因为灯箱方法也被其他元素调用，这会导致代码重复。

以下是完整代码：

＆＃13;

initVue(target: string) : void {
    this.vue = new Vue({
        el: "#" + target,
        store,
        delimiters: vueDelimiters,     
        data: {

        },
        methods: {
            
            openLightbox(src) {
                console.log(src);
            },
            
            imageZoom(src) {
            
                lens = document.createElement("DIV");
                
                // works but is executed on pageload, not on click
                lens.addEventListener("click", this.openLightbox(src));
                
                // Is executed on click and not on payload, but throws error: Uncaught TypeError: this.openLightbox is not a function
                lens.addEventListener("click", function() { this.openLightbox(src) }, false);

                
            }
        }
    });
}

＆＃13;

Answer 1

您必须将this附加到匿名函数，如下所示：

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

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

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

否则，this将不会引用您需要的父上下文。

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

1 个答案: