vue之输入框在火狐浏览器不能弹出问题

列表展示，点击修改弹出对应的输入框，并获取光标

代码实现

<span v-show="scope.$index !== idx"
                  style="color: #337ABE;cursor:pointer;"
                  @click="amend(scope.$index, $event)">修改</span>
<input v-if="scope.$index === idx" 
                   type="number"
                   value="remains"
                   v-model="remains"
                   @blur="parking"
                   :ref="'berths' + scope.$index"
                   min="0" />

在谷歌浏览器上可以正常弹出，但是狐火浏览器不能弹出

解决方法一，使用$ref操作DOM,定时器延时操作

setTimeout(() => {
    this.$refs['berths' + index].focus();
}, 100);

 方法二，自定义指令

火狐获取焦点过程，先el.blur(),再el.focus()

directives: {
    focus: {
      inserted(el) {
        // 使用定时器解决火狐兼容问题
        setTimeout(() => {
          el.focus();
        }, 100);
      }
    }
  }

使用

<input v-if="scope.$index === idx"
                   type="number"
                   value="remains"
                   v-focus
                   v-model="remains"
                   @blur="parking"
                   min="0" />