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入门教程(6) Window窗口对象
Jan 31 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
js实现上传图片及时预览
May 07 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
WordPress网站性能优化指南
2015/11/18 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2015年双拥工作总结
2015/04/08 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js