My parent component structure looks like this:
<template>
<b-container>
<b-modal id="uw-qb-add-item-modal"
ref="uw-qb-add-item-modal"
title="Enter Item Number"
@ok="handleNewItem">
<form @submit.stop.prevent="handleSubmit">
<b-form-input type="text"
placeholder="Enter the item number" />
</form>
</b-modal>
// Other code here...
<b-collapse :id="editId">
<build-item-edit @doOnEmit="expand" :buildNumber="buildNumber"
:itemNumber="editItemNumber"/>
</b-collapse>
// Other code here...
</b-container>
</template>
// Child Component
<script>
export default {
methods: {
edit(item) {
const payload = {
item
};
this.$emit('edit', item.itemNumber);
const collapseElement = document.querySelector('#' + this.editId);
if (collapseElement && !collapseElement.classList.contains('show')) {
this.$emit('expandCollapse');
}
this.editmsg = "Edit your item above and then click 'Save Edit'"
}
}
};
</script>
This will now trigger the expand of the toggle collapse on the parent component when the button is clicked in the child component.