VueJs - Calling methods passed to dynamically created DOM elements

问题

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

i.e. inside my 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();         
}

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>

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:

in my methods:

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

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

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?

回答1:

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.

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

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

How to re-mount a component?

Force updating vue component

来源：https://stackoverflow.com/questions/55919206/vuejs-calling-methods-passed-to-dynamically-created-dom-elements

标签

javascript

datatables

vuejs2

vue-component