"focus is not a function" in Vue.js even though element exists

Question

I am trying to focus on a textarea in Vue.js, but I am getting the following error:

TypeError: _this2.$refs[ref].focus is not a function

This is the textarea:

<textarea v-model="text[key].content" :ref="text[key].text_id" class="text-textarea" @focus="makeCurrent(key)" v-on:keyup="detectVariable(key, text[key].text_id)"></textarea>

This is my code:

let ref = 'foobar';
console.log(this.$refs[ref]);
this.$refs[ref].focus();

The console.log prints out the correct textarea:

0: textarea.text-textarea

But when I try to focus I get the error mentioned above. I don't understand this behavior at all. The ref exists and points to the correct textarea (it's the only textarea on the page for now, to avoid confusion) but focus is not a function on it?

Answer 1

When a ref is used inside a v-for loop, it behaves differently, and the ref is an array of the elements/components with a given ref within the loop.

For example, if I have the following, where keys contains multiple values,

<div v-for="key in keys">
    <textarea ref="textAreaInput">
</div>

To focus the first, I'd do this.$refs['textAreaInput'][0].focus()