data-action data return undefined

[blu94]

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`)
		},

[light169]

i have the same problem, when delete or edit the first line , it got

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'id' of undefined"

but if I delete or edit other line no error occur, very strange!!

[blu94]

problem, when delete or edit the first line , it got

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'id' of undefined"

but if I delete or edit other line no error occur

Yes, seems like only not working for the first record, and when click 2nd record it return 1st record data

[maximusblade]

Same issue here.

customRowAction(data, row, tr, target)

data.id returns previous row ID.

[noogen]

Can someone post example code that reproduce the issue somewhere? Because the demo is working fine. Thanks.

[maximusblade]

this worked for me

<vdtnet-table
ref="table"
:fields="fields"
@viewsession="doActionHere"

function:

doActionHere(data, row, tr, target) {
  const session_id = target.attr("data-id");

}

[Kamleshpaul]

Same issue here.

It picks one level down id

Let say

id	action
1	edit
2	edit
3	edit

here
if you click 1 then getting error as not data send from library
if you click 2 then getting 1 st data
if you click 3 then getting 2 nd data

version "vue-datatables-net": "^1.3.0",

here is my code

<vdtnet-table
    :fields="fields"
    :opts="options"
    ref="table"
    @edit="editAttr"
    @delete="deleteAttr"
    @copy="copyAttr"
/>

fields: {
    name: {
        label: "Name",
        sortable: true,
        searchable: true,
    },
    type: {
        label: "Type",
        sortable: true,
        searchable: true,
    }
    },
    action: {
        isLocal: true,
        label: "Action",
        defaultContent: `<button
                            class="btn btn-warning"
                            data-action="edit" 
                        >
                            <i class="fas fa-edit"></i>
                        </button>
                        <button
                            class="btn btn-danger"
                            data-action="delete" 
                        >
                            <i class="fas fa-trash"></i>
                        </button>
                        <button
                            class="btn btn-info"
                            data-action="copy" 
                        >
                            <i class="fas fa-copy"></i>
                        </button>`,
    },
},

i m getting here

 editAttr(data) {
            console.log(data.id); // not getting data for 1st index
         
        },

NOTE it was working last week

[maximusblade]

@Kamleshpaul try something like this.

fields: { name: { label: "Name", sortable: true, searchable: true, }, type: { label: "Type", sortable: true, searchable: true, } }, action: { isLocal: true, label: "Action", defaultContent:







, }, },

` editAttr(data, row, tr, target) {
const data_id = target.attr("data-id");
console.log(data_id);

    },`

[Kamleshpaul]

@maximusblade
thanks i tried but i don't have any attr in tr so i m not getting anything

[noogen]

From the note "it was working last week", can someone who is having issue try v1.2.8 to see if issue was introduced with new version? There was a big change merged that's why a big version bump to 1.3.0 instead of 1.2.9

[Kamleshpaul]

@noogen i don't know but some how i think datatable row.data() is not getting proper row data

vue-datatables-net/src/VdtnetTable.vue

Line 522 in d8f5562

const data = row.data()

[maximusblade]

@noogen

    // only emit if there is action
      if (action) {
        // detect if row action
        let tr = target.closest('tr')
        if (tr) {
          if (tr.attr('role') !== 'row') {
            tr = tr.prev()
          }
          const row  = that.dataTable.row(tr)
          const data = row.data()
          that.$emit(action, data, row, tr, target)
        } else {
          // not a row click, must be other kind of action
          // such as bulk, csv, pdf, etc...
          that.$emit(action, null, null, null, target)
        }
      }
    }```

     tr = tr.prev() == problem!!

[Kamleshpaul]

@maximusblade thanks i copy compoent code and put in my local folder and removed tr = tr.prev() this code now it is working 👍🏻

[noogen]

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.

[noogen]

OK, try version 1.4.0.

[Kamleshpaul]

@noogen thank you so much i updated and it works 👍🏻