Datatables Ajax Cant render Vue component

2
votes

I'm trying to connect Datatable in Ajax mode and Vue component, which should, if successful, render the Order button of the Product. I created an API for my web application, and through the get-query I pass the JSON to the AJAX table property. All data is displayed correctly, and even one button is an order, but it is not a Vue component, but a simple HTML. So I pass to JSON this string

but as a result, this row is written to the table cell, it is not converted into a vue-component...

if I pass this line in normal datatable mode (without Ajax) - the component is rendered, there are no problems.

I using Laravel 5.5

1
ajaxlaraveldatatablesvuejs2
show what you have so far and it will be easier for people to help – Giovanni S
for example: the standard html of Vue component: <orderbutton :orderid=2>Order</orderbutton> I put this html into JSON file and than pass to AJAX And DataTable render this as text but not as really button – pc sound
I described this here datatables.net/forums/discussion/48598/… – pc sound

1 Answers

1
votes

Because it is easy to wrap/use jQuery component in Vue, it is common for User to make mistake thinking that jQuery components are compatible with Vue.

One of the most important thing to understand is the Vue component life-cycle (created, mounted, etc.. https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks). You may be able to render a Vue button inside of a jQuery DataTable, but that is because you are lucky in having the data early; i.e. You have the data before Vue has completely rendered the Vue wrapper component.

This explain why ajax doesn't work. The component has already been rendered. Even though the jQuery component re-rendered, it will not render the Vue component. You will also run into other issues like Vue events not wired-up correctly in subsequent reload/refresh, component are not behaving correctly (visible, hidden, v-if) because Vue is Reactive while jQuery Plugin/Component is generally not.

Therefore, in order to wrap a jQuery component, you have two options:

  1. You have to destroy and recreate the Vue component everytime you received the ajax data and render the jQuery Component in Vue created event. This help the wrapper component to re-render, wire-up events, etc... - partial solution, see Tony's answer here: Vuejs and datatables: table empty when using v-for to fill data

  2. Accept the fact that the jQuery component is not Reactive and create a translation layer on top to communicate with the jQuery component from Vue. Example (shameless plug) my wrapper for jQuery DataTable component: https://github.com/niiknow/vue-datatables-net