Vue.js 強制在函數內部重新加載

Question

一小段代碼，當鼠標懸停時，我希望輸入字段可見並專注於它：
模板：

<span @mouseover="hoverOn('givenName')">
    <input v-show="this.hovers['givenName']" ref="givenName" v-model="...

和

methods: { 
    hoverOn: function (name) { 
      this.hovers[name] = true 
      this.$refs[name].focus() 
    }, ... 

該字段變為可見，但焦點未完成。 如果我第二次將鼠標懸停在該字段上，則該字段現在可見，因此焦點有效。 所以函數的參數沒問題，在數據部分正確聲明了懸停數組。
這可能是因為 Vue 尚未設置調用焦點時可見的字段。 我試圖在第一行和焦點線之間插入一個 this.$forceUpdate() 但這不起作用。

Answer 1

你是對的 - 它沒有聚焦的原因是因為元素還沒有渲染。 將焦點調用放在nextTick 回調中，vue 將等到元素渲染后調用它。

methods: {
  hoverOn: function (name) {
    this.hovers[name] = true;
    this.$nextTick(() => {
        this.$refs[ref].focus()
    })
},