VueJs -调用传递给动态创建的DOM元素的方法

Question

在我的Vuejs组件中，我动态填充了一个datatable

例如，在我的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函数中，当填充datatable时，我附加了一个Edit锚标记，并在其中传递了方法editModal。单击此编辑链接应该会触发一个模式，如下所示：

在我的方法中：

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

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

但是该模式不是从editModal函数触发的。我已经确认该模式工作正常，因为我的添加按钮触发了该模式，该按钮调用addModal函数。所以我的想法是，由于我从动态创建的链接调用editModal函数，所以可能需要将一些额外的东西传递给我的代码来触发这个方法？

Answer 1

你使用datatables动态追加html，vue不会监听动态的DOM操作。因此，您定义的方法不适用于新插入的HTML。

实现所需功能的一种方法是使用editModal方法创建一个新的Vue实例，并在渲染完成后将其挂载到表上。

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组件的内容

How to re-mount a component?

Force updating vue component

Answer 2

为VueJS对象指定一个名称：

var MyObj = new Vue({
    ...
    methods: {
        call_me() {
            alert('Here I am!');
        },
    }
});

在您的dynamic HTML中，您可以生成以下内容：

...
var link = "<a href='#' onclick='JavaScript:MyObj.call_me()'>Click me!</a>";
...

我不知道这是不是一个好的解决方案，但它是有效的。