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 相关文章推荐
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
javascript实现导航栏分页效果
Jun 27 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
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python的re模块正则表达式操作
2016/05/25 Python
python实现移位加密和解密
2019/03/22 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python @property原理解析和用法实例
2020/02/11 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
家庭教育先进个人事迹材料
2014/01/24 职场文书
倡议书格式
2014/04/14 职场文书
完美的中文自荐信
2014/05/24 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
教师岗位职责
2015/02/03 职场文书
志愿者个人总结
2015/03/03 职场文书
2016公司年会通知范文
2015/04/25 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书