我需要在VueJS3中添加一系串列格行,每行一個按鈕,每個按鈕都需要呼叫一個函式。但是該事件不起作用,Firefox 工具也不顯示該事件。
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>
控制臺沒有錯誤。該事件根本不起作用。
uj5u.com熱心網友回復:
手動添加 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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/379598.html
標籤:javascript Vuejs3
上一篇:如何在物件陣列中搜索特定值
