VueJs-调用方法传递给动态创建的DOM元素 [英] VueJs - Calling methods passed to dynamically created DOM elements

问题描述

在我的Vuejs组件中，我正在动态填充数据表

In my Vuejs component, i'm populating a datatable dynamically

即内部方法：

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部分：

This is the HTML part of the component:

<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 函数中的通知在数据表中，我附加了一个编辑锚标记，并在其中传递方法 editModal 。单击此编辑链接应触发如下所示的模态：

Notice in my displayUserTypes function, when populating the datatable, i append an Edit anchor tag and in it, pass the method editModal. Clicking on this edit link should fire off a modal as shown below:

在我的方法中：

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

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

但不会触发该模式editModal 函数。我确认该模式运行良好，因为我的添加按钮调用 addModal 会触发该模式。所以我的想法是，因为我从动态创建的链接调用 editModal 函数，所以可能还有一些需要传递给我的代码才能触发此方法的东西？

But the modal is not being triggered from the editModal function. I've confirmed that the modal is working well since my button for adding that calls the addModal function fires the modal. So my thinking is since i call the editModal function from a dynamically created link, there's perhaps something extra that i need to pass to my code to trigger this method?

推荐答案

您正在使用数据表动态添加html，vue不会监听动态DOM操作。因此，您定义的方法不适用于新插入的HTML。

You are appending html dynamically using datatables, vue doesn't listen on dynamic DOM manipulations. So the methods you have defined are not available for the newly inserted HTML.

一种实现所需功能的方法是使用editModal方法创建一个新的Vue实例并进行安装

One way to achieve what you want is to create a new Vue instance with the method editModal and mount it on the table after rendering is done.

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

If you want to achieve this without creating new vue instance everytime, refer below on how to re-mount a vue component

如何重新安装组件？

强制更新vue组件

这篇关于VueJs-调用方法传递给动态创建的DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！