Add html element with an event in Vue3

Question

I need to add series of table lines in VueJS3, each one with a button, and each button need to call a function. But the event doesn't work, neither the Firefox Tools doesn't show the event.

HTML

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

Javascript component (snippet)

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)
    },
}

It creates the right HTML, but it doesn't add the event to the button.

<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>

There is no error in console. The event simply doesn't work.

wujido · Accepted Answer · 2021-12-12 23:22:23Z

1

Adding HTML manually can't work. You have to use v-for macro. Something like that should work.

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

answered Dec 12, 2021 at 23:22

wujido

1392 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luciano Pinheiro Over a year ago

Thanks. It worked. The final solution uses the v-for inside HTML on template. My javascript snippet was something like "for (let table of tables) { this.tables.push(table); }

Collectives™ on Stack Overflow

Add html element with an event in Vue3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related