vtTableRow row properties not found

[ianef]

• Vue.js version: 2.6.11, vue-tables-2 version: 2.0.0-beta.1
• consumed using: webpack
• The row data is not found on 'this' when handling custom events on a vtTableRow replacement
• relevant code:

  
  <template>
  <tr :class="`VueTables__row ${props.rowAttrs.class} VtContextMenuTableRow`"
      v-bind="props.rowAttrs.attrs"
      @click="props.rowEvents.click"
      @contextmenu="onContextMenu">
      <vt-child-row-toggler :row-id="props.rowId" v-if="props.childRowTogglerFirst"/>
      <vt-table-cell v-for="(column, i) in props.columns" :key="i" :column="column"/>
      <vt-child-row-toggler :row-id="props.rowId" v-if="props.childRowTogglerLast"/>
  </tr>
  </template>

.... import Vue from 'vue'; import {ServerTable, Event} from 'vue-tables-2'; import VtContextmenuTableRow from './components/VtContextmenuTableRow.vue'; Vue.use(ServerTable, {}, false, 'bootstrap4', { tableRow: VtContextmenuTableRow});

- steps for reproducing the issue:
When the contextmenu event is fired on the above code, there are no relevant properties on the 'this' object that determine the state and data of the table row. The $parent item however, which is also a vtTableRow element (weird but true!) does have the relevant data and using 'this.$parent.row' retrieves what is needed.

There seems to be some very odd nesting of objects going on in the table throughout, ref tags and event handlers do not seem to relate to the objects that are expected and are frequently a parent or child of what is expected.

[matfish2]

this.dispatch is an internal method, and it does call the event on the parent, because of the component structure as explained below. It is not meant to be used by the consumer. In any case, due to the deeply nested structure of the table, you are advised to use an event bus or a vuex commit to send data all the way up

There seems to be some very odd nesting of objects going on in the table throughout, ref tags and event handlers do not seem to relate to the objects that are expected and are frequently a parent or child of what is expected:

The components tree is built with the renderless technique, which allows for the flexibility of swapping UI while maintaining behaviour. Thus every "renderful" component has a renderless child, which provides the functionality using a scoped slot.

The $parent item however, which is also a vtTableRow element

The parent of VtTableRow is RLTableBody. Maybe you meant the child, which is RLTableRow, i.e the renderless component feeding data to VtTableRow..

[ianef]

Nope it was definitely the parent, this code was copied directly from my working example.

Closing this is not helpful as you have not addressed the core issues here.

When trying to develop a replacement for vTableRow there does not appear to be an obvious way of fetching the row data. Nor, apparently, communicating with the container.

I am trying to detect the contextmenu event on the cell/row and get this passed up so the event can be sensibly observed via the table tag event handlers, hence the use of dispatch.

If dispatch is not intended for developer use then something else that is integrated should be. Using a separate event bus just for custom events seems way off the basic principles of Vue and good coding practice. A template which is hooked into the fabric of the table which replaces the core component should be able to utilise whatever the core component uses as its interfaces, it really should be able to know about the context of where it is, what's happening to it and be able to inform external components of events through a common and integrated event system.