Javascript 向动态创建的元素Vuejs添加鼠标事件_Javascript_Vue.js

Javascript 向动态创建的元素Vuejs添加鼠标事件

javascript vue.js

Javascript 向动态创建的元素Vuejs添加鼠标事件,javascript,vue.js,Javascript,Vue.js,我只是想知道是否有人尝试过这样做（这是在vuejs创建的方法中）： for（设i=0；i

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

for（设i=0；i



我试图将鼠标悬停事件（第32行）添加到新创建的元素中。有没有其他方法可以实现这样的目标？
试试这个。我在您的JSFIDLE代码中做了一些更改
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);

for（设i=0；i

在JSFIDLE为我工作过试试这个。我在您的JSFIDLE代码中做了一些更改
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);

for（设i=0；i

在JSFIDLE为我工作过问题：
让我们看看有问题的一行：
bar.setAttribute("mouseover", this.showBlock(500, false));

我看到以下问题：

它首先计算this.showBlock（500，false）
的返回值，然后将其设置为mouseover
属性。该值很可能是未定义的，因为函数不返回任何内容

该值甚至无关紧要，因为mouseover
属性在HTML和Vue中都毫无意义，Vue会查找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实例可以访问
请参阅中的完整解决方案
C）由于您没有做任何Vue做不到的事情，您可以（我建议您）使用Vue来创建元素。在我看来，这就是Vue的目的，它可以减轻创建和修改元素的痛苦。根据您引用的for循环，Vue实现如下所示（在HTML中）：


有关完整的解决方案，请查看。
问题：
让我们看看有问题的一行：
bar.setAttribute("mouseover", this.showBlock(500, false));

我看到以下问题：

它首先计算this.showBlock（500，false）
的返回值，然后将其设置为mouseover
属性。该值很可能是未定义的，因为函数不返回任何内容

该值甚至无关紧要，因为mouseover
属性在HTML和Vue中都毫无意义，Vue会查找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实例可以访问
请参阅中的完整解决方案
C）由于您没有做任何Vue做不到的事情，您可以（我建议您）使用Vue来创建元素。在我看来，这就是Vue的目的，它可以减轻创建和修改元素的痛苦。根据您引用的

for循环，Vue实现如下所示（在HTML中）：

要获得完整的解决方案，请查看。
应该是这样的。bar.addEventListener（“mouseover”，this.showBlock（500，false））；只是普通的Javascript为什么不使用Vue为
项生成元素呢？然后您可以添加@mouseover 指令。@saiyan我也尝试了addEventListener…showBlock方法仍然没有反应。@juzraai这是个好主意让我试试这不是您想要的吗？应该是这样的。bar.addEventListener（“mouseover”，this.showBlock（500，false））；只是普通的Javascript为什么不使用Vue为项生成元素呢？然后您可以添加@mouseover 指令。@saiyan我也尝试了addEventListener…showBlock方法仍然没有反应。@juzraai这是个好主意让我试试这不是您想要的吗？