I am dealing with a complex situation involving two nested Vue JS components. The child component is emitting certain events to the parent function, which I have defined within the parent component declaration. The issue here is that these events are being triggered every time I use the component, and it would be great if I could avoid declaring them in the props of the parent component each time. But I'm stuck on where exactly I should relocate these event declarations within the parent component props.
<admin-data-table
:dataTable="dataTable"
:modelName="modelName"
:collection="collection"
:tblShowFields="tblShowFields"
:selectedList.sync="selected"
@change-sort="changeSort"
@edit-row="edit"
@remove-row="remove"
></admin-data-table>
The @change-sort, @edit-row, and @remove-row events need to be set up this way every time I utilize the admin-data-table component, so I am exploring ways to remove the need to declare them repetitively.
One approach I tried was moving them into the template tag of the child component [admin-data-table], but unfortunately, it did not yield the desired outcome.
admin-data.table component:
<template
@change-sort="changeSort"
@edit-row="edit"
@remove-row="remove">
<v-flex xs12>
<v-progress-linear :indeterminate="true" :height="3" color="#c79121" :active="dataTable.loadingVal" class="mb-0 mt-5"></v-progress-linear>
<v-data-table :ref="modelName + 'Table'" :value="selectedList" @input="$emit('update:selectedList', $event)" :headers="dataTable.headers" :items="collection" :pagination.sync="dataTable.pagination" select-all item-key="id" class="elevation-1" >
<template v-slot:headers="props">
<tr>
<th><v-checkbox :input-value="props.all" color="#c79121" :indeterminate="props.indeterminate" primary hide-details @click.stop="toggleAllSelected"></v-checkbox></th>
<th v-for="header in props.headers" :key="header.text"
:class="['column sortable', dataTable.pagination.descending ? 'desc' : 'asc', header.value === dataTable.pagination.sortBy ? 'active' : '']"
@click="$emit('change-sort', header.value)">
<v-icon small>arrow_upward</v-icon>
{{ header.text }}
</th>
</tr>
</template>
<template v-slot:items="props">
<tr :active="props.selected">
<td class="text-center align-middle" @click="props.selected = !props.selected">
<v-checkbox :input-value="props.selected" primary hide-details color="#c79121"></v-checkbox>
</td>
<td v-for="(field, key) in props.item" v-if="tblShowFields.includes(key)">{{ field }}</td>
<td class="text-right align-middle">
<v-btn
v-for="(btn, i) in dataTable.rowButtons" :key="i"
:title="btn.title"
:color="btn.color" fab small
@click="btn.click">
<v-icon>{{ btn.icon }}</v-icon></v-btn>
<v-btn title="Edit" color="primary" fab small @click="$emit('edit-row', props.item.id)"><v-icon>edit</v-icon></v-btn>
<v-btn title="Delete" color="error" fab small class="text-white" @click="$emit('remove-row', props.item.id)"><v-icon>delete_outline</v-icon></v-btn>
</td>
</tr>
</template>
<template slot="no-data">
<p class="text-xs-center">No Data</p>
</template>
</v-data-table>
</v-flex>
</template>
<script>
export default {
name: "admin-data-table",
props: [
'dataTable',
'collection',
'modelName',
'collection',
'selectedList',
'tblShowFields'
]
}
</script>
I am looking for suggestions on how I can incorporate these as defaults within the admin-data-table component itself?