Vue.js 强制在函数内部重新加载答案

【问题标题】：Vue.js force reload INSIDE the functionVue.js 强制在函数内部重新加载
【发布时间】：2020-02-08 13:50:38
【问题描述】：

一小段代码，当鼠标悬停时，我希望输入字段可见并专注于它：
模板：

<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() 但这不起作用。

【问题讨论】：

【解决方案1】：

你是对的——它没有聚焦的原因是元素还没有渲染。将焦点调用放在nextTick callback 中，vue 将等到元素渲染后调用它。

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

【讨论】：