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)的返回值，然后将其设置为mouseover属性。该值很可能是undefined，因为您的函数不会返回任何内容。
该值甚至都无关紧要，因为mouseover属性在HTML和寻找v-on:mouseover或@mouseover的Vue中绝对没有意义。
Vue仅在初始化时查找这些属性/指令，但是您要在初始化后添加元素。

可能的解决方案：

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

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

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

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

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

在@saiyan's answer中查看完整的解决方案。

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

2 个答案: