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


Posted in Javascript onOctober 28, 2019

背景:后端返前端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不能触发点击事件的问题

控制台:

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

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

Javascript 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
JS 常用校验函数
Mar 26 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
js实现的map方法示例代码
Jan 13 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 #Javascript
vue动态禁用控件绑定disable的例子
Oct 28 #Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 #Javascript
关于vue组件事件属性穿透详解
Oct 28 #Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 #Javascript
vue h5移动端禁止缩放代码
Oct 28 #Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php实现的操作excel类详解
2016/01/15 PHP
关于php开启错误提示的总结
2019/09/24 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python实现画圆功能
2018/01/25 Python
Python函数中不定长参数的写法
2019/02/13 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
华为python面试题
2016/05/03 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
社区文化建设方案
2014/05/02 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Python 正则模块详情
2021/11/02 Python