I implemented a dialog window component in Vue 2 that listens to the event tcs-show-confirm (which triggers the dialog display by setting the show property to true in a parent component):
@Prop({ default: false })
show: boolean;
@Prop()
buttons: Array<TcsDialogButton>;
mounted() {
this.$nextTick(function () {
TcsEventBus.$on('tcs-show-confirm', () => {
console.log(this.$refs.tcsdialbuttons);
});
});
}
The HTML structure of the component, specifically regarding the footer slot content remains intact:
...
<slot name="footer">
<div v-if="buttons && buttons.length" ref="tcsdialbuttons" v-for="(button, index) in buttons">
<button tabindex="0" class="tcs-button tcs-dialog__button" @click="$emit('close', button.emitString)">
{{button.text}}
</button>
</div>
<div style="clear: both;"></div>
</slot>
...
An issue arises when attempting to access the buttons as console.log(this.$refs.tcsdialbuttons) returns an empty array [] with length 0. I am puzzled by this behavior and how to focus on the first button.
In an attempt to resolve the issue, I changed the fat arrow function to a normal function:
TcsEventBus.$on('tcs-show-confirm', function() {
console.log(this.$refs.tcsdialbuttons);
});
However, this results in a return value of undefined.
Curiously, despite successful element referencing in other components within my project, I encounter difficulties accessing elements within this particular component. The reason behind this inconsistency eludes me.