vuetable-2
vuetable-2 copied to clipboard
cell-clicked event not working with slots
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.
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.
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 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.
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)
},