将按钮添加到在 vue.js 中动态创建的表

Question

我正在尝试动态创建显示在表的第 5（最后）列中的按钮，该表也是动态创建的。一切都是正确创建的。但是，单击按钮后，不会触发该功能。也许是因为我正在使用 vue.js 来开发我的前端。我尝试在下面的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)
  }

Answer 1

您需要使用addEventListener 来添加任何事件。示例：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>