vue2-datatable-component ajax operations - vuejs2

Question

I am fairly new to Vue JS but have been using JavaScript for quite a while now. I have the vue2-datatable-component by onewaytech installed and have been using the Advanced Example that they have posted. The table is working correctly but am trying to have the buttons in the operations column execute an ajax call to delete the object displayed in that row. I didn't see anything in the documentation about passing the unique ID to the td-Opt so I am stuck.

Answer 1

You will have to use a dynamic component to make it. for example:
data () {
return {
props: ['row'],
supportBackup: true,
supportNested: true,
tblClass: 'table-bordered',
tblStyle: 'color: #666',
pageSizeOptions: [5, 10, 15, 20],
columns: [
{title: '#', field: 'uid', sortable: true},
{title: 'Date', field: 'date_at', sortable: true},
{title: 'Nombre', field: 'name', sortable: true},
{title: 'Precio', field: 'total_price', sortable: true},
{title: 'Action', field: 'action', tdComp: 'Opt'},
],
data: [],
total: 0,
selection: [],
query: {},
}`enter code here`
},
Where Opt:
import actionItem from "../xxx.vue";
import DisplayRow from "../Utils/nested-DisplayRow.vue";
components: {"Opt": actionItem, , 'DisplayRow': DisplayRow},
So in your ActionItem component you can create your component, that component will be your row action.