vue-datatables-net: data-action data return undefined

data-action return undefined when click

Here is my code:

<vdtnet-table ref="table" :fields="datatableOptions.fields" :opts="datatableOptions.options" :containerClassName="datatableOptions.containerClassName" :className="datatableOptions.className" @edit="editPage" @delete="deletePage">
  <template slot="actions" slot-scope="ctx">
    <div class="d-flex justify-content-center">
      <b-button variant="primary" data-action='edit' class="btn-icon icon-left waves-effect waves-light" v-if="can('Update Page') || is('Super Admin')">
        <i class="feather icon-edit-2"></i>
      </b-button>
      <b-button variant="danger" data-action='delete' class="btn-icon icon-left waves-effect waves-light" v-if="(can('Destroy Page') || is('Super Admin')) && ctx.row.type == 'CUSTOM_PAGE'">
        <i class="feather icon-trash-2"></i>
      </b-button>
    </div>
  </template>
</vdtnet-table>

Here is my data:

datatableOptions: {
				fields: {
					banner: {
						label: "Banner",
						className: "fit",
						sortable: false,
					},
					title: {
						label: "Title",
					},
					readableType: {
						label: "Type",
						className: "fit",
					},
					author: {
						label: "Author",
						className: "fit",
					},
					status: {
						label: "Status",
						className: "fit",
					},
					actions: {
						label: "Actions",
						className: "fit text-center",
						sortable: false,
					}
				},
				options: {
					ajax: {
						url: `${process.env.APP_URL}api/admin/page`,
						type: "GET",
						headers: {
							Authorization: `Bearer ${this.$store.state.auth.token}`
						},
						complete: () => {
							this.$store.dispatch("auth/setAuth")
						},
					},
					serverSide: true,
					processing: true,
					// pageLength: 1,
					dom: `<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>><"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>`,
					// select: {
					//   style: 'multi'
					// }
					// oLanguage: this.$store.state.datatablesLanguage,
				},
				className: "table dataTable",
				containerClassName: "table-responsive mb-0",
				details: {}
			}

Here is my click function:

editPage(data, row, tr, target) {
			console.log(data);
			// this.$router.push(`/admin/page/${data.slug}/edit`)
		},

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 15 (4 by maintainers)

Most upvoted comments

OK, try version 1.4.0.

Ok, got it now. Apparently, datatables.net upstream changes remove role=“row” attribute. I was using it to detect master details row. You can see from the demo that it previous has this attribute on row: https://niiknow.github.io/vue-datatables-net/

I will make update shortly to support this change.