vuetable-2 icon indicating copy to clipboard operation
vuetable-2 copied to clipboard

cell-clicked event not working with slots

Open almightynassar opened this issue 7 years ago • 4 comments

I wanted to trigger the 'cell-clicked' event for a slot component, but the system does not even register it. 'cell-clicked' still registers for normal field cells.

Probably because these events were not added to when the slot was created (it's only added to 'normal' fields):

@click="onCellClicked(item, field, $event)"
@dblclick="onCellDoubleClicked(item, field, $event)"

Is this intended behaviour (i.e. so that developers can control the 'click' event for their slots)? Just curious about the thought behind it. Personally I wanted to control 'normal' fields and slots using the same cell-clicked event, but I can get by manually firing the event for on my slots.

If this is the intended behaviour, a note should be made in the 'Special Fields' section of the documentation that some vuetable events will not fire for these special fields.

almightynassar avatar Dec 04 '17 16:12 almightynassar

This is the same as __component special field, where no event was captured.

At the moment, It is impossible to account for all use cases. I just thought that it could be handled better in the component and slot.

Hopefully, I can find a better way to handle this in the next version.

ratiw avatar Dec 05 '17 14:12 ratiw

Thanks for the feedback. I thought as much, but decided to post here in case anyone runs across the problem.

I'm a bit of a Vue.js amateur so please forgive if this question is a bit basic. (I'm not working on the project that uses this so I'll test this out once I'm able)

How does Vue.js handle cases of event "conflicts" if multiple @click events are defined? Do they override one another, or do all of them fire?

For instance, if we had in Vuetable.vue:

<slot :name="extractArgs(field.name)"
    :row-data="item" :row-index="index" :row-field="field.sortField"
    @click="onCellClicked(item, field, $event)"
    @dblclick="onCellDoubleClicked(item, field, $event)"
></slot>

But the custom code additionally uses an @click on the slot itself:

<template slot="actions" scope="props" @click="customEvent()">
    <div>Some special stuff</div>
</template>

Does the customEvent() fire only, onCellClicked(), or do both of them fire?

almightynassar avatar Dec 07 '17 04:12 almightynassar

@almightynassar did you ever resolve this? I'm having the same problem. I have varying content in the cells of my vuetable. for all but one cell I want it to fire a specific event. for the 1 cell, I want it to fire a different event. the cell-clicked works on all "regular" cells but not on template cells.

clemsontiger avatar Oct 15 '18 18:10 clemsontiger

I am not so experienced, but spent last 3 days to implement vuetables. Most difficult is to aplly styles for responsivnes. To hide some columns on mobile. Thats why i moved a lot of fields to slots. And clicking events i've made following way. Just straighforward.

<template slot="expand" slot-scope="props">
      <div class="lg:hidden" @click="cellClicked($event, props.rowData)">
            XX
      </div>
  </template>
methods: {
    cellClicked ($event, data) {
// console.log('cellClicked: ', $event)
 this.$refs.vuetable.toggleDetailRow(data.id)
    },

DKWLB avatar Nov 16 '20 11:11 DKWLB