VueJs - вызов методов, передаваемых динамически создаваемым элементам DOM.

Question

В моем компоненте Vuejs я динамически заполняю данные

т.е. внутри моего methods:

displayUserTypes(){
   axios.get('/antenna-monitor/pull-user-types').then( ({data}) => 
   {
      for(var i in data)
      {
          $('#user-roles').dataTable().fnAddData( [
              data[i].name,
              data[i].description,
              '<a href="#" title="Edit" @click.prevent="editModal"><i class="fa fa-edit"></i></a> | <a href="#" title="Delete"><i class="fa fa-trash"></i></a>'
           ]);
      }

},
created() {
        this.displayUserTypes();         
}

Это часть HTML компонента:

<button class="btn btn-success" @click="addModal"><i class="fa fa-plus"></i>Add New</button>                     
<table id="user-roles" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
       <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Action</th>
            </tr>
       </thead>
 </table>

Обратите внимание, что в моей функции displayUserTypes при заполнении таблицы данных я добавляю тег привязки Edit и в нем передаю метод editModal. Нажатие на эту ссылку редактирования должно запустить модал, как показано ниже:

в моих методах:

addModal(){
       $('#userRolesModal').modal('show');
},

editModal(){
       $('#userRolesModal').modal('show');                
},

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

Answer 1

Вы добавляете html динамически, используя таблицы данных, vue не слушает динамические манипуляции с DOM.Таким образом, определенные вами методы недоступны для вновь вставленного HTML.

Один из способов добиться того, чего вы хотите, - создать новый экземпляр Vue с помощью метода editModal и смонтировать его в таблице после завершения рендеринга.

displayUserTypes() {
  axios.get('/antenna-monitor/pull-user-types').then(({ data }) => {
    for (var i in data) {
      $('#user-roles').dataTable().fnAddData([
        data[i].name,
        data[i].description,
        '<a href="#" title="Edit" @click.prevent="editModal"><i class="fa fa-edit"></i></a> | <a href="#" title="Delete"><i class="fa fa-trash"></i></a>'
      ]);
    }

    new Vue({
     methods: {
        editModal() {
          $('#userRolesModal').modal('show');
        }
     }
    }).$mount('#user-roles')
  });
}

Если вы хотите достичь этого без создания нового экземпляра vue каждый раз, см. Ниже о том, как перемонтировать компонент vue

Как перемонтировать компонент?

Принудительное обновление компонента Vue