将鼠标事件添加到动态创建的元素Vuejs

Question

我只是想知道有没有人尝试过这样做（这是在 vuejs 创建的方法中）：

for (let i = 0; i < this.items.length; i++) {
    let bar = document.createElement('div');
  bar.className = this.items[i].colour;
  bar.style.cssText = `width: ${this.items[i].weight}%`;
  bar.setAttribute("mouseover", this.showBlock(500, false)); //not working
    document.querySelector('.bar').appendChild(bar);
}

https://jsfiddle.net/phfilly/eywraw8t/167799/

我正在尝试向新创建的元素添加悬停鼠标事件（第 32 行）。还有其他方法可以实现这样的目标吗？

Answer 1

试试这个。我对您的 jsfiddle 代码做了一些更改。

for (let i = 0; i < this.items.length; i++) {
        let bar = document.createElement('div');
      bar.className = this.items[i].colour;
      bar.style.cssText = `width: ${this.items[i].weight}%`;
            // ?
     // bar.setAttribute("mouseover", this.showBlock(500, false));
        document.querySelector('.bar').appendChild(bar);



    }
    var that=this;
    setTimeout(function(){
      document.querySelector('.bar').childNodes.forEach(function(e,y){
        e.addEventListener("mouseover", function(){that.showBlock(500, false)});
      });},100);

在 jsfiddle 中为我工作

Answer 2

问题：

让我们看看有问题的行：

bar.setAttribute("mouseover", this.showBlock(500, false));

我看到以下问题：

它首先计算this.showBlock(500, false)的return值，然后将其设置为mouseover属性。该值很可能是 undefined，因为您的函数没有 return 任何东西。
这个值甚至都不重要，因为 mouseover 属性在 HTML 中完全没有意义，在寻找 v-on:mouseover 或 @mouseover 的 Vue 中也没有意义。
Vue 在初始化时只查找这些 attributes/directives，但是您在 Vue 初始化之后添加元素。

可能的解决方案：

A) 确保您的 Vue 模型可以作为全局变量访问（如 window.app），然后您可以使用 onmouseover HTML 属性和字符串化你的函数调用：

bar.setAttribute("onmouseover", "app.showBlock(500, false)");

B) 添加事件侦听器而不是属性。像这样：

bar.addEventListener("mouseover", function () { app.showBlock(500, false); });

这还要求您的 Vue 实例可以访问。

请参阅中的完整解决方案。

C) 因为你没有做任何 Vue 不能做的事情，你可以（我建议你）使用 Vue 来创建你的元素。在我看来，这就是 Vue 的意义所在，可以减轻创建和修改元素的痛苦。根据您引用的 for 循环，Vue 实现将如下所示（在您的 HTML 中）：

<div class="bar"> <div v-for="i in items" :class="i.colour" :style="{ width: i.weight + '%' }" @mouseover="showBlock(500, false)"></div> </div>

如需完整的解决方案，请查看 @Bert's fiddle。

将鼠标事件添加到动态创建的元素Vuejs

Adding mouse event to dynamic created element Vuejs

javascript

vue.js