为什么下面代码点击删除按钮不能成功触发m2函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="Vue.js"></script> </head> <body> <div id="wer"> <table id="123" border="1"> <tr> <td> 文本数据</td> <td>含有标签的文本数据</td> </tr> </table> 文本数据<input type="text" v-model="value1"> <input type="button" value="提交" @click="m1"> </div> <script> new Vue({ el:"#wer", data:{ value1:"", deleteId:"34" }, methods:{ m1:function () { var htmlTableDataCellElement = document.createElement("td"); htmlTableDataCellElement.innerText=this.value1; var htmlTableDataCellElement1 = document.createElement("td"); htmlTableDataCellElement1.innerHTML="<input type=\"button\" value=\"删除\" @click=\"m2\">"; var htmlTableRowElement = document.createElement("tr"); htmlTableRowElement.id=this.deleteId; htmlTableRowElement.appendChild(htmlTableDataCellElement); htmlTableRowElement.appendChild(htmlTableDataCellElement1); var elementById = document.getElementById("123"); elementById.appendChild(htmlTableRowElement); }, m2:function () { console.log(document.getElementById("34")); } } }) </script> </body> </html>

时间: 2024-01-21 13:05:06 浏览: 184

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

在Vue.js开发过程中，有时候会遇到一个问题，即使用`v-html`指令插入动态HTML内容时，这些内容中的事件监听器（如点击事件）无法正常触发。这是因为Vue.js的模板编译机制不处理`v-html`插入的纯HTML字符串，它们被视为静态内容，不会进行编译和绑定。本文将详细介绍这个问题的背景、原因以及解决方案。 **问题背景：** 在某些场景下，后端可能会返回HTML格式的数据，前端需要将这些数据解析并渲染到页面上。例如，一个评论系统可能需要显示包含富文本格式的评论内容，这些内容可能包含链接或者其他交互元素。在Vue中，我们通常使用`v-html`指令来实现这个功能，如`<div v-html="commentContent"></div>`。然而，当这些动态插入的HTML包含如`<a @click="show(1)"></a>`这样的事件绑定时，点击事件并不会被触发。 **问题原因：** Vue.js的模板编译器在编译时会解析并绑定所有的指令和事件，但是`v-html`的内容是在运行时动态插入的，Vue不会尝试去解析这些内容中的指令或事件监听器。因此，虽然`<a>`标签可以正确地渲染出来，但它的`@click`事件并没有被Vue处理，所以点击事件无法正常工作。 **解决方案：** 为了解决这个问题，我们可以使用Vue的组件系统来替代`v-html`。创建一个自定义组件，并在其中定义事件处理方法。这样，即使内容是从后端动态获取的，Vue也会对其进行编译，确保事件监听器能够正常工作。以下是一个具体的示例： ```html <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); }, }, }); export default { data() { return {}; }, methods: {}, mounted() { // 在组件挂载完成后，将自定义组件的实例添加到指定的DOM元素 var component = new MyComponent().$mount(); document.getElementById('parent').appendChild(component.$el); }, }; </script> <style scoped></style> ``` 在这个示例中，我们首先创建了一个名为`MyComponent`的自定义组件，它包含一个`<a>`标签和一个`show`方法。然后，在父组件的`mounted`钩子函数中，我们实例化这个组件并将其挂载到页面上的某个元素上。这样，即使`<a>`标签是动态插入的，它的点击事件也能被正确处理。总结来说，Vue.js的`v-html`指令不适合用于处理需要事件监听器的动态内容。通过创建自定义组件并使用Vue的组件系统，我们可以确保动态生成的HTML内容中的事件监听器能够正常工作。这种方法不仅解决了点击事件的问题，还提高了代码的可维护性和安全性，因为Vue会对组件中的所有内容进行编译和管理。

这是因为在创建包含删除按钮的单元格时，使用了字符串而不是Vue模板。这样做会导致Vue无法将@click事件绑定到m2方法上。可以将创建单元格的代码重写为以下形式： ``` var htmlTableDataCellElement1 = document.createElement("td"); var deleteButton = document.createElement("input"); deleteButton.type = "button"; deleteButton.value = "删除"; deleteButton.addEventListener("click", this.m2); htmlTableDataCellElement1.appendChild(deleteButton); ``` 这样就可以将点击事件绑定到Vue实例的m2方法了。

阅读全文

相关推荐

如图所示按钮无法响应事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> Not found </body> </html>

<!doctype+html> <html> <head> <meta+charset="utf-8"> <title>佳佳美食</title> <link+rel="stylesheet"+type

-doctype-html-html-lang-en-dir-ltr-head-meta-name:

-doctype-html-html-lang-en-head-meta-charset-utf-8-title-GitHub-Privacy-Stat:GitHub隐私声明-GitHub Docs <title> <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”> <link rel =“ alternate icon” type =“ imagepng” href =“ a

在javascript中，null＞=0 为真，null==0却为假，null的值详解

!DOCTYPE htmh1高翎翔的计算机导论网页-h1

js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器 原创

DOCTYPE html-爱心代码.docx

DOCTYPE html.docx

用按钮触发Javascript动态生成一个表格的代码

bootstrap实现点击删除按钮弹出确认框的实例代码

以HTML网页实例说明head区代码的意思

jQuery点击图标按钮弹出表单代码

浅谈HTML的doctype和编码

JS按钮倒计时函数

在HTML文档中插入一段JavaScript代码，并定义一个按钮，当点击按钮，弹出“欢迎”对话框

帮我写一段js代码，每个div带一个按钮，点击按钮就在按钮下面创建一个相同的div

最新推荐

平尾装配工作平台运输支撑系统设计与应用

管理建模和仿真的文件

MATLAB遗传算法探索：寻找随机性与确定性的平衡艺术

如何在S7-200 SMART PLC中使用MB_Client指令实现Modbus TCP通信？请详细解释从连接建立到数据交换的完整步骤。

MAX-MIN Ant System：用MATLAB解决旅行商问题

"互动学习：行动中的多样性与论文攻读经历"

【实战指南】MATLAB自适应遗传算法调整：优化流程全掌握

在Spring AOP中，如何实现一个环绕通知并在方法执行前后插入自定义逻辑？

Flutter状态管理新秀：sealed_flutter_bloc包整合seal_unions

关系数据表示学习

js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器原创