Me gustaría enfocar una entrada vue cuando se presiona un botón. Tengo entendido que necesito el elemento html, que obtengo al establecer un valor de referencia y luego decir:
this.$refs.theRefName.$el.focus(); Pero me estoy haciendo tropezar con la parte de los refs de esa expresión. Consulte el MRE a continuación, donde refs contiene las claves correctas, pero los valores están vacíos. Como resultado .$el no está definido y la expresión es errónea.
He visto SO artículos que se ocupan de que this no esté definido (no es un problema para mí) o que $refs está vacío porque el elemento se representó condicionalmente (tampoco es un problema para mí). Tengo $refs , pero ¿por qué contiene objetos vacíos?
Vue.config.productionTip = false; Vue.config.devtools = false; var app = new Vue({ el: '#app', data: { message: 'World' }, methods: { click() { alert(JSON.stringify(this.$refs)) // here's what I want to do, but I can't because inp2 is empty // this.$refs.inp2.$el.focus(); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h1>Why are refs empty objects?</h1> <input ref="inp1"></input><br/><br/> <input ref="inp2" placeholder="i want focus on click"></input><br/><br/> <button @click="click">Click me</button> </div>Si puede ayudarme a llegar al elemento html y enfocarlo, estaría muy agradecido.
Prueba sin $el :
Vue.config.productionTip = false; Vue.config.devtools = false; var app = new Vue({ el: '#app', data: { message: 'World' }, methods: { click() { this.$refs.inp2.focus(); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> <div id="app"> <h1>Why are refs empty objects?</h1> <input ref="inp1" /><br/><br/> <b-form-input ref="inp2" placeholder="i want focus on click"></b-form-input> <button @click="click">Click me</button> </div>