VUE解决 v-html不能触发点击事件的问题

背景：后端返前端html格式的数据，前端用v-html解析渲染，如：<a @click="show(1)"></a>，a标签能成功渲染，但其绑定的事件无法触发。

原因：vue没有将其作为vue的模板解析渲染

解决方案：不用v-html而是component模板编译

上干货：

<template>
 <div class="hello">
  <h1>
   我是父组件
  </h1>
  <div class="parent" id="parent">
  </div>
 </div>
</template>

<script>
 import Vue from 'vue';
 var MyComponent = Vue.extend({
  template: '<a @click="show(1)">我是大魔王</a>',
   methods: {
   show(i) {
    console.log(i);
   },
  }
 });
 var component = new MyComponent().$mount();
 export default {
  data() {
   return {
   }
  },
  methods: {
  },
  mounted() {
   document.getElementById('parent').appendChild(component.$el);
  }
 }
</script>

<style scoped>
</style>

页面：

控制台：

以上这篇VUE解决 v-html不能触发点击事件的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现在v-html的html字符串中绑定事件

    需求: 需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效. <div class="code-review"> <div v-html="html" v-highlight @click="addComment($event)"></div> </div> compute

  • vue中v-text / v-html使用实例代码详解

    废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

  • vue.js绑定事件监听器示例【基于v-on事件绑定】

    vue.js绑定事件监听器示例【基于v-on事件绑定】

    本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g

  • 详解三种方式解决vue中v-html元素中标签样式

    Vue为v-html中标签添加CSS样式 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}</h2> <p class="news-time">{{news.datetime}}</p> <div class="con" v-html=&qu

  • VUE解决 v-html不能触发点击事件的问题

    背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发. 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: <template> <div class="hello"> <h1> 我是父组件 </h1> <div class

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

  • 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: <ul id="demo"> <li class

  • vue中的主动触发点击事件

    目录 主动触发点击事件 如何自动触发点击事件 模拟点击下载文件.图片 主动触发点击事件 由vue代码触发点击事件,实现的效果是:点击按钮,触发 <input> 输入框点击事件,从而实现选择文件. 示例如下: <template>     <input type="file" id="input-upload-file" ref="selectFiles" multiple="multiple"&g

  • ASP.NET中RadioButtonList绑定后台数据后触发点击事件

    本文实例为大家分享了RadioButtonList绑定后台数据,触发点击事件的方法 首先前台页面放置一个RadioButtonList 控件 <asp:RadioButtonList runat="server" ID="RadioButtonList1" BorderStyle="None" RepeatColumns="3" CssClass="" RepeatLayout="Flow&

  • JS检测页面中哪个HTML标签触发点击事件的方法

    本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要

  • Vue v-for循环之@click点击事件获取元素示例

    应用背景 浏览论坛的贴子(数据库的数据通过vue遍历在html页面上) 点击帖子的标题.图片,可以查看详细的帖子(点击事件获取id) 1.设置一个隐藏值的放置Id的div,点击div就获取id,传参到后台(点击一部分) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <

  • jQuery第一次运行页面默认触发点击事件的实例

    例如: 1. $("#txt").trigger("click");//默认触发点击搜索按钮 2. $(".aaa .bbb").eq(0).click();//默认第一个点击(例如UL的LI有多个可以点击的用于默认点击第一个用) 注意: 要放在函数外面, 不然不起效果的 以上这篇jQuery第一次运行页面默认触发点击事件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JS通用方法触发点击事件代码实例

    这篇文章主要介绍了JS通用方法触发点击事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最简单的触发单击事件肯定是elem.click(),平时在不需要考虑兼容性的场合我都是这么干的,但是毕竟这个方法有兼容性(具体兼容性如何没做过测试),所以还是要掌握一个通用的方法. 以下代码是网上比较容易找到的一段代码,我在前面加了一段MouseEvent的判断: /** * 触发单击事件 * @param elem 需要触发事件的DOM对象 */

  • Vue触发input选取文件点击事件操作

    CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display: none; } } HTML <div class="upload-btn-box"> <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="

随机推荐