Does not work @click de vue in datatables

3

I am using datatables server side of Yajra for Laravel and I have the following:

var table = $("#dt_user_draw").DataTable({
  destroy: true,
  processing: true,
  responsive: true,
  serverSide: true,
  ordering: false,
  "ajax": {
    "method": "GET",
    "url": 'url'
  },
  "columns": [{"data": "user"},
              {"data": "email"},
              {"data": "registered_at",},
              {"render": function (data, wea, row) {
                          return '<a href="" @click="showDrawUser" ><i class="nav-icon far fa-eye fa-fw " aria-hidden="true" title="Ver Draw"></i></a></li>';
                          }
              }]
  });

Inside the render in the last column, I have a @click="showDrawUser" , the issue is that it does not render and the click does not work and if the element is inspected, the @click appears and I can not find a solution to this.

    
asked by Juan Pablo B 06.08.2018 в 15:45
source

1 answer

1

I do not think that can work. Both DataTables and Vue start from the base that control the DOM, and those assumptions contradict each other. When DataTables inserts an element into the DOM and tries to add a Vue listener as @click , at that point Vue has already renamed the DOM and interpreted the listeners. You will not hear directives added by hand by DataTables.

I would advise you to use a datatables plugin for vue. But to solve your specific doubt, what you could do is draw an HTML table via Vue and then instantiate DataTables on it.

For example, in the component:

export default {
  name: 'Dtt',
  data() {
    return {
      persons: [],
    };
  },
  methods: {
    showDrawUser(person) {
      console.log('showDrawUser', person);
    },
    initDtt() {
      $(document).ready(() => {
        $("#dt_user_draw").DataTable({
          "columns": [
            { "data": "user" },
            { "data": "email" },
            { "data": "registered_at" },
            { "data": "actions" }
          ]
        });
      });
    }
  },
  mounted() {
    $.ajax({
      "method": "GET",
      "url": 'url/example',
      dataType: 'json'
    }).then((res) => {
      this.persons = res.data;
      this.initDtt();
    });
  }
};

What it does is: when assembling the component, it makes a call, the data is brought. That data has the form:

{
  "data": [{
      "user": "Tiger Nixon",
      "email": "[email protected]",
      "registered_at": "2011/04/25"
    },
    {
      "user": "Garrett Winters",
      "email": "[email protected]",
      "registered_at": "2011/07/25"
    },
    {
      "user": "Ashton Cox",
      "email": "[email protected]",
      "registered_at": "2009/01/12"
    },
    {
      "user": "Cedric Kelly",
      "email": "[email protected]",
      "registered_at": "2012/03/29"
    },
    {
      "user": "Airi Satou",
      "email": "[email protected]",
      "registered_at": "2008/11/28"
    }
  ]
}

you assign res.data to the property persons of the component.

In the HTML you have:

<div class="dtt">
  <table id="dt_user_draw">
    <thead>
      <th>user</th>
      <th>email</th>
      <th>registered</th>
      <th>action</th>
    </thead>
    <tbody>
      <tr v-for="person in persons">
        <td>{{person.user}}</td>
        <td>{{person.email}}</td>
        <td>{{person.registered_at}}</td>
        <td>
          <a @click="showDrawUser(person)">
            <i class="nav-icon far fa-eye fa-fw " aria-hidden="true" title="Ver Draw"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

So, being populated the property persons draws the rows of the table declaring its listeners and only then invoke DataTables to do the minimum: provide paging, sorting and search. p>     

answered by 06.08.2018 в 18:26