在 Vue3 中添加带有事件的 html 元素

Question

我需要在 VueJS3 中添加一系列 table 行，每个行都有一个按钮，每个按钮都需要调用一个函数。但是该事件不起作用，Firefox Tools 也没有显示该事件。

HTML

<table id='tableFields' class='table' v-html='fields'>
</table>

Javascript 组件（片段）

for (let tablename of this.tables) {
            this.fields += "<tr><td><button @click=\"setBaseTable('" + tablename + "')\">" + tablename + "</button></td></tr>";
}
...
methods: {
    setBaseTable: function (name) {
      this.baseTable = name;
      alert(name)
      console.log(name)
    },
}

它创建了正确的 HTML，但它没有将事件添加到按钮。

<table id="tableFields" class="table">
<tbody>
<tr><td><button @click="setBaseTable('active_time')">active_time</button></td></tr>
<tr><td><button @click="setBaseTable('active_worktime')">active_worktime</button></td></tr>
</tbody>
</table>

控制台没有错误。该活动根本不起作用。

Answer 1

手动添加 HTML 无效。你必须使用 v-for 宏。类似的东西应该可以工作。

<table id='tableFields' class='table' v-html='fields'>
  <tr v-for="table in tables">
    <td>
      <button @click="setBaseTable(table)">{{ table }}</button>
    </td>
  </tr>
</table>

在 Vue3 中添加带有事件的 html 元素

Add html element with an event in Vue3

javascript

vuejs3