vue2-datatable-component ajax operations

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.

Sunderam Dubey · Accepted Answer · 2022-11-06 16:11:26Z

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.

edited Nov 6, 2022 at 16:11

Sunderam Dubey

8,83512 gold badges25 silver badges43 bronze badges

answered Jun 1, 2018 at 20:14

Omar Sarmiento Rolo

214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue2-datatable-component ajax operations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related