Как динамически добавить кнопку HTML, которая вызывает метод на клике

Question

У меня большой набор данных, и я использую таблицы данных для его отображения.В таблице каждая строка должна иметь кнопку, которая будет отображать модальное с указанной информацией из строки.Поскольку строки таблицы данных создаются без использования vue, не представляется возможным создать элемент HTML, который может вызывать метод vue.Это можно обойти?Есть ли способ, которым я могу просто вызвать функцию javascript?

Я пробовал много вещей, и я начинаю думать, что vue этого не допустит.Причина, по которой я использую таблицы данных вместо просто таблицы vue, заключается в том, что это очень большой набор данных, и таблицы данных значительно облегчат навигацию.

Буду признателен за любые мысли или советы по этому поводу.Я довольно плохо знаком с VUE и Datatables.Спасибо!

Answer 1

Это то, что я делаю

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

Создает кнопку, которая вызывает функцию и передает customer.id в качестве параметра.

Затем в сценарии я могу добавить

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

Answer 2

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'));