VUE2解决 v-html不能触发点击事件不生效问题

在Vue2中，使用v-html渲染的HTML代码是不会被Vue实例所监听的，因此也就无法触发Vue实例中绑定的点击事件。不过，我们可以通过自定义指令来解决这个问题。

首先，在Vue实例中注册一个自定义指令，用来监听v-html渲染的HTML元素的点击事件：

Vue.directive('html-click', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', function () {
      binding.value(vnode.context)
    })
  }
})

然后，在需要渲染HTML代码的地方，使用v-html指令，并在HTML元素上绑定刚才注册的自定义指令：

<div v-html="htmlCode" v-html-click="handleClick"></div>

最后，在Vue实例中定义handleClick方法来处理点击事件：

methods: {
  handleClick: function (context) {
    // 处理点击事件
  }
}

这样就可以解决v-html无法触发点击事件的问题了。当用户点击渲染出来的HTML元素时，会触发自定义指令中绑定的点击事件，从而执行Vue实例中定义的handleClick方法。

相关问题

VUE2解决div中 v-html不能触发点击事件不生效问题

在 Vue2 中，使用 v-html 指令动态渲染 HTML 代码时，如果 HTML 代码中包含有点击事件绑定，会出现点击事件不生效的问题。这是因为 v-html 渲染的 HTML 代码会被当做静态内容插入到 DOM 树中，而不会像 Vue 模板中的标签一样被 Vue 进行编译和渲染。

为了解决这个问题，可以使用 Vue2 的事件委托机制，将点击事件委托给父级元素或者根元素。

具体实现方法如下：

1. 在 div 标签上添加 @click.prevent="handleClick" 事件，用于捕获点击事件。

2. 在 handleClick 方法中，判断点击事件的 target 是否为包含有点击事件绑定的元素，如果是，则执行点击事件对应的方法。

3. 在包含有点击事件绑定的元素上添加一个自定义属性，用于标识该元素需要绑定点击事件。

4. 在 div 标签上使用 v-html 指令渲染 HTML 代码时，将包含有点击事件绑定的元素的自定义属性一同渲染出来。

示例代码如下：

HTML 代码：

<div @click.prevent="handleClick" v-html="html"></div>

Vue 实例：

new Vue({
  el: "#app",
  data: {
    html: `<p><a custom-click href="javascript:void(0)">点击我</a></p>`
  },
  methods: {
    handleClick(e) {
      const target = e.target;
      if (target.hasAttribute('custom-click')) {
        // 执行点击事件对应的方法
        console.log('点击事件生效了');
      }
    }
  },
  mounted() {
    // 在 v-html 渲染的 HTML 代码中添加自定义属性
    const a = document.querySelector('a[custom-click]');
    if (a) {
      a.setAttribute('custom-click', 'true');
    }
  }
});

通过以上方法，就可以实现在 div 中使用 v-html 渲染的 HTML 代码中绑定点击事件，同时点击事件也能够正常生效了。

el-table vue-seamless-scroll 按钮点击事件不生效

根据提供的引用内容，el-table和vue-seamless-scroll都是Vue.js的组件，其中vue-seamless-scroll是一个用于实现无缝滚动的组件。在使用vue-seamless-scroll包裹了一个滚动div的list后，发现list中的div需要点击进行其他逻辑处理时，却没有任何效果。这是因为vue-seamless-scroll中间包裹的dom复制渲染，没有带上dom的事件导致的。解决这个问题的方法是在vue-seamless-scroll组件中添加@click.native修饰符，以便在子组件中触发原生的点击事件。

至于el-table的按钮点击事件不生效，可能是因为没有正确绑定事件或者事件绑定的方法有误。可以检查一下事件绑定的语法是否正确，以及事件绑定的方法是否存在或者是否有误。

下面是一个关于如何在vue-seamless-scroll组件中添加@click.native修饰符的例子：

<template>
  <vue-seamless-scroll>
    <div v-for="(item, index) in list" :key="index" @click.native="handleClick(item)">
      {{ item }}
    </div>
  </vue-seamless-scroll>
</template>

<script>
import VueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    VueSeamlessScroll
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  },
  methods: {
    handleClick(item) {
      // 处理点击事件
    }
  }
}
</script>