首页 > Vue中,如何对动态生成的{{{topic.html}}},对其中的 img 标签绑定onclick事件

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
            }
        }
    }
});
【热门文章】
【热门文章】