记一次el-input使用的坑

记一次el-input使用的坑

el-input使用不同与原生input，所以在vue中改变绑定的数据时需注意

<el-input v-model="form.schedule" @input="validateNumber($event)" />

要想在input时改变form.schedule的值来改变输入框显示的值，以下方法是做不到的

//只可以输入1-7之间的数字
validateNumber(value) {
   if (!/[^1-7]/.test(value)) {
     this.form.schedule = value;
   } else {
       this.form.schedule = value.substring(0, value.length - 1);
   }
}

虽然改变了form.schedule的值，但是输入框显示的内容只会改变一次，然后显示的值与绑定的值无关，即输入什么显示什么，不再显示form.schedule的值

需要使用 this.$nextTick()

//驗證班期的有效輸入
validateNumber(value) {
   if (!/[^1-7]/.test(value)) {
     this.$nextTick(() => {
       this.form.schedule = value;
     });
   } else {
       this.$nextTick(() => {
         this.form.schedule = value.substring(0, value.length - 1);
       });
   }
}

搞定！