如何让 Vue.js 在 setInterval 实现倒计时的情况下保证 input 正常输入？

Question

• 问题再现：点击 button 开始倒计时，这时在 input 内输入的内容会被在1s后被刷新掉。
• 需求：希望能在倒计时的同时保证 input 正常输入。

如果不使用 v-model.lazy，仅用 v-model 的话可以实现。但由于我之后要加表单验证，希望在 input 失焦后才激活验证条件，所以必须用 v-model.lazy。
在使用 lazy 及不使用组件的条件下，有没有其他办法可以实现需求？Vue 有没有局部渲染的机制？

谢谢。

代码见 jsfiddle

Answer 1

若干年后，我也碰到了这个问题，我也想看看能不能用innerHTML,但是我这输入项太多，不好操作。我想了一个折中的办法，我在获得输入框焦点是清除定时器，失去焦点时再把定时器赋值回来，缺点就是定时不准了。不过对于我的业务影响不是很大，只能这么折中了。

<el-input
  type="text"
  placeholder="请输入ICP许可证号"
  v-model="regsStep1.icpLicenseNumber"
  @focus="_focusInput"
  @blur="_blurInput"
></el-input>

methods: {
    _focusInput() {
      clearInterval(this.timerFirstEmaill);
    },
    _blurInput() {
      this.timerFirstEmaill = setInterval(() => {
        this.veritaCode.time -= 1;
        if (this.veritaCode.time == 0) {
          clearInterval(this.timerFirstEmaill);
          this.veritaCode.showTime = false;
          this.veritaCode.time = 300;
        }
      }, 1000);
    },
}

希望后来人如果不幸踩到这个坑有更好的办法写出来，帮助后来的后来人。

Answer 2

既然问题已经定位到时vue渲染机制到的的问题。
那么我们针对这个问题来解决一下，
使用组件解决：https://codepen.io/linong/pen...。

Answer 3

请问，最后怎么解决的？我也遇到了这个问题了。我是用mpvue写的小程序，场景跟你的一样。