As I work on creating a foundational "TableComponent," incorporating selectable rows and more, I am faced with the requirement for this TableComponent to accept a prop named "buttons."
These buttons are expected to be in the form of an array of objects structured like this:
buttons: [{
label: 'Manage Themes',
click: () => {
if(this.selectedRows.length) {
this.$router.push({ name: 'ManagePageOptions', query: { concernable_type: this.type, concernable_ids: this.selectedRows.map(row => row.id).join(',') }});
} else {
alert('Please select 1 or more company or user');
}
}
}]
To render a row of buttons within the table component based on the provided input, the following logic is implemented:
<b-button v-for="button in this.buttons" @click="button.click" :key="button.label"> {{ button.label }} </b-button>
However, a challenge arises when accessing the selected rows data within the click function of these buttons, as "this" pertains to the parent component.
UPDATE: A solution has been discovered where passing "this" as a parameter to the click function resolves the issue. The question remains about its appropriateness.
buttons = [{
label: 'Manage Pages',
click: (vm) => {
if(vm.selectedRows.length) {
vm.$router.push({ name: 'ManagePageOptions', query: { concernable_type: vm.type, concernable_ids: vm.selectedRows.map(row => row.id).join(',') }});
} else {
alert(Lang('Please select 1 or more company or user'))
}
}
}];
Data for the TableComponent:
data() {
return {
selectedRows: [],
m_this: this,
};
},
_
<b-button v-for="button in this.buttons" @click="button.click(m_this)" :key="button.label"> {{ button.label }} </b-button>