Estoy tratando de concentrarme en un área de texto en Vue.js, pero recibo el siguiente error:
TypeError: _this2.$refs[ref].focus is not a functionEsta es el área de texto:
<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>Este es mi código:
let ref = 'foobar'; console.log(this.$refs[ref]); this.$refs[ref].focus(); El console.log imprime el área de texto correcta:
0: textarea.text-textarea Pero cuando trato de enfocar me sale el error mencionado anteriormente. No entiendo este comportamiento en absoluto. La ref existe y apunta al área de textarea (es el único área de textarea en la página por ahora, para evitar confusiones) pero el focus no es una función en él.
Cuando se usa una ref dentro de un bucle v-for , se comporta de manera diferente, y la referencia es una matriz de los elementos/componentes con una referencia dada dentro del bucle.
Por ejemplo, si tengo lo siguiente, donde las claves contienen varios valores,
<div v-for="key in keys"> <textarea ref="textAreaInput"> </div> Para enfocar el primero, haría this.$refs['textAreaInput'][0].focus()