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

Question

Small piece of code, when on mouseover I want an input field is visible and focus on it:
Template:

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

and

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

The field becomes visible but the focus is not done. If I mouseover a 2nd time, as the field is now visible, the focus works. So parameters of the function are OK, the hovers array is correctly declared in the data section.
This is probably because Vue has not yet set the field visible when the focus is called. I tried to insert a this.$forceUpdate() between the 1st line and the focus lines but this does not work.

Answer 1

You are correct - the reason it doesn't focus is because the element hasn't rendered yet. Put the focus call in a nextTick callback and vue will wait until the element has rendered to call it.

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