[英]Adding Buttons to a Table created dynamically in vue.js
I am trying to dynamically create buttons which are displayed in the 5th (last) column of a table, which is also created dynamically.我正在尝试动态创建显示在表的第 5(最后)列中的按钮,该列也是动态创建的。 Everything is created properly.
一切都被正确创建。 However, upon clicking the buttons, the function is not triggered.
但是,在单击按钮时,不会触发该功能。 Perhaps it is because I am using vue.js to develop my front-end.
也许是因为我使用 vue.js 来开发我的前端。 I have tried using "v-on:click" instead of "click" in the
button.setAttribute('click', 'claim()')
code below, but this did not help.我曾尝试在下面的
button.setAttribute('click', 'claim()')
代码中使用“v-on:click”而不是“click”,但这没有帮助。
var table = document.createElement('table')
for (var i = 1; i <= 5; i++) {
var th = document.createElement('th')
th.appendChild(header)
table.appendChild(th)
for (var j = 1; j <= 4; j++) {
var tr = document.createElement('tr')
for (var k = 1; k <= 5; k++) {
var td = document.createElement('td')
var node = document.createTextNode(k)
td.appendChild(node)
tr.appendChild(td)
if (k === 5) {
var button = document.createElement('input')
button.setAttribute('type', 'submit')
button.setAttribute('value', 'Purchase')
button.setAttribute('click', 'purchase()')
td.appendChild(button)
}
}
table.appendChild(tr)
}
You need to use addEventListener
for adding any event.您需要使用
addEventListener
添加任何事件。 Example : button.addEventListener('click', purchase)
示例:
button.addEventListener('click', purchase)
var app = document.getElementById("app"); var table = document.createElement('table'); app.appendChild(table) for (var i = 1; i <= 5; i++) { var th = document.createElement('th') //th.appendChild(header) table.appendChild(th) for (var j = 1; j <= 4; j++) { var tr = document.createElement('tr') for (var k = 1; k <= 5; k++) { var td = document.createElement('td') var node = document.createTextNode(k) td.appendChild(node) tr.appendChild(td) if (k === 5) { var button = document.createElement('input') button.setAttribute('type', 'submit') button.setAttribute('value', 'Purchase') button.addEventListener('click', purchase) td.appendChild(button) } } table.appendChild(tr) } } function purchase() { console.log("done") }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id='app'> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.