Vue.js - this.$refs.key returns an empty array or undefined instead of element

Question

I have a component for dialog windows in Vue 2 that is listening to event tcs-show-confirm (it is the same event that shows the dialog, sets 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);
      });
    });
  }

A html of the component is here (content of the footer slot is not replaced with another componet's html):

  ...
  <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>
  ...

Problem is that console.log(this.$refs.tcsdialbuttons) shows an empty array [] with length 0. Why is that? How can I access the buttons and set a focus on the first one?

I also tried to change fat arrow function to normal function:

      TcsEventBus.$on('tcs-show-confirm', function() {
        console.log(this.$refs.tcsdialbuttons);
      });

But now it returns undefined.

I just found out that I cannot reference any of the elements in the component, even if it works in other components in my project. I don't understand..

I suspect the issue is with this variable. Try replacing the fat arrow function in TcsEventBus callback with traditional callback function. — abhishekkannojia
– abhishekkannojia, Commented Oct 9, 2017 at 12:34
When are you actually emitting the tcs-show-confirm event? — thanksd
– thanksd, Commented Oct 9, 2017 at 13:14
For example when "log out" is clicked in another component: TcsEventBus.$emit('tcs-show-confirm', new DialogMessage(DialogMessageType.Confirm, this.onCloseDialog, 'Are you sure?')); — Axel Productions 86
– Axel Productions 86, Commented Oct 9, 2017 at 13:20

ttntm · Accepted Answer · 2021-02-10 09:37:57Z

1

I strongly suggest considering these 2 good practices first:

Once that's taken care of, I'd suggest adding an index to your v-for and adding the :ref to the individual buttons so you can find each one of them in a function.

Working with array items via ref is rather well described here: this.$refs[("p" + index)].focus is not a function

You should be able to apply focus to the first button using something like this.$refs[button${index}][0].focus();

answered Feb 10, 2021 at 9:37

ttntm

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Axel Productions 86 Over a year ago

Looks like a clear and concise answer, unfortunately I'm unable to verify suggested solutions now.

ttntm Over a year ago

Thanks for the comment. I saw the date this question was asked but wrote an answer anyway - I found myself in a similar situation last year and remembered having a hard time figuring it out.

Collectives™ on Stack Overflow

Vue.js - this.$refs.key returns an empty array or undefined instead of element

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related