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 相关文章推荐
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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 字符串函数收集
2010/03/29 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
浅谈Vue.js
2017/03/02 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python uuid模块使用实例
2015/04/08 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Python flask框架post接口调用示例
2019/07/03 Python
python hashlib加密实现代码
2019/10/17 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
介绍一下EJB的体系结构
2012/08/01 面试题
商铺门面租房协议书
2014/10/21 职场文书
运动会开幕词
2015/01/28 职场文书
小平您好观后感
2015/06/09 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP