javascript - Vue中，如何对动态生成的{{{topic.html}}}，对其中的 img 标签绑定onclick事件

问题描述

问 题

需求大概是这样的：

  <div id="page">
      {{{topic.html}}}    
  </div>

var vm = new Vue({
    el: '#page',
    data: {
        topic: {}
    }
});

其中topic.html是就是html字符串，可能会不断更新，每次更新之后，都要对其中的img标签绑定onclick事件，应该怎么做？vue有办法解决吗？

目前是用jquery来实现的：

vm.$watch('topic', function () {
    $('#page img').unbind('click').click(function () { // 需要解绑，否则会重复绑定事件
        // some...
    });
});

这个思路是对的吗？不想引入jQuery

解决方案

推荐使用事件代理

<div id="page" @click="proxyImage">
</div>

var vm = new Vue({
    el: '#page',
    data: {
        topic: {}
    },
    method: {
        proxyImage: function (e) {
            if (e.target.tagName.toUpperCase() === 'IMG') {
                // do something
            }
        }
    }
});

这篇关于javascript - Vue中，如何对动态生成的{{{topic.html}}}，对其中的 img 标签绑定onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！