通過 vue 中的 ref 獲取元素並賦予其焦點

Question

當按下按鈕時，我想將焦點放在 vue 輸入上。 我的理解是我需要 html 元素，我通過設置 ref 值得到它，然后說：

this.$refs.theRefName.$el.focus();

但是我被那個表達式的refs部分絆倒了。 請參閱下面的 MRE，其中refs包含正確的鍵，但值為空。 結果.$el未定義並且表達式錯誤。

我已經看到處理this未定義（對我來說不是問題）或$refs為空的 SO 文章，因為元素是有條件地呈現的（對我來說也不是問題）。 我有$refs ，但為什么它包含空對象？

 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>

如果您能幫我找到 html 元素並給予關注，我將非常感激。

Answer 1

不使用 $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>