Necesito agregar una serie de líneas de tabla en VueJS3, cada una con un botón, y cada botón debe llamar a una función. Pero el evento no funciona, ni Firefox Tools no muestra el evento.
HTML
<table id='tableFields' class='table' v-html='fields'> </table>Componente Javascript (fragmento)
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) }, }Crea el HTML correcto, pero no agrega el evento al botón.
<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>No hay ningún error en la consola. El evento simplemente no funciona.
Agregar HTML manualmente no puede funcionar. Tienes que usar v-for macro. Algo así debería funcionar.
<table id='tableFields' class='table' v-html='fields'> <tr v-for="table in tables"> <td> <button @click="setBaseTable(table)">{{ table }}</button> </td> </tr> </table>