如何动态添加一个在单击时调用方法的html按钮

Question

I have a big set of data, and I'm using datatables to display it. On the table, each row needs to have a button that will display a modal with the specified info from the row. Since the rows of the datatable are made without using vue, it doesn't appear I can create an html element that can call a vue method. Is there a way around this? Is there a way I can just call a javascript function?

I have tried many things and I'm starting to think vue will not allow this. The reason I'm using datatables instead of just a vue table, is because it is a very large data set and datatables would make it much easier to navigate.

Any thoughts or advice on this would be appreciated. I am fairly new to vue and datatables. Thanks!

Answer 1

const foo = (elmName, text) => {
  let button = document.createElement(elmName);
  button.innerHTML = text;
  button.onclick = () => {
      alert('dynamic');
      return false;
   };
    return button
  };

  document.body.appendChild(foo('button', 'Click It'));

Answer 2

This Is what I do

<template>    
    <div v-show="showUpdateModal">
        my modal HTML
    </div>
    <div v-show="showDeleteModal">
        my modal HTML
    </div>

    <table>
      <thead>
        <th>No</th>
        <th>Name</th>
        <th>Email</th>
        <th>Action</th>
      </thead>
      <tbody>
        <tr
          v-for="(customer, index) in customers"
          :key="customer.id">
          <td>{{ index+1 }}</td>
          <td>{{ customer.name }}</td>
          <td>{{ customer.email }}</td>
          <td>
            <button @click="openUpdateModal(customer.id)">
              <i class="fa fa-edit"></i>
            </button>
            <button @click="openDeleteModal(customer.id)">
              <i class="fa fa-trash-alt"></i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
</template>

It creates button that calls function and passes customer.id as parameter.

Then in script, I can add

<script>
export default {
    data () {
       return {
          customers: [], // array of customer from database
          showUpdateModal: false, // will open modal when it is true
          showDeleteModal: false,
       }
    },
    methods: {
       openUpdateModal (id) {
          this.showUpdateModal = true
       }
       openDeleteModal (id) {
          this.showDeleteModal = true
       }
    }
}
</script>