el-input 修改v-model的值,DOM不更新

用el-input做了个保留小数点后两位的功能,代码如下:

 input_amount(){
                //保留小数点后两位
                let index=this.formData.confirm_amount.indexOf(".");
                if(index>=0){
                    if(this.formData.confirm_amount.length>((index+1)+2)){
                        let subStr=this.formData.confirm_amount.substring(0,((index+1)+2));
                        console.log("截取字符串:",subStr,typeof subStr);
                        this.$nextTick(()=>{
                            this.formData.confirm_amount=subStr;
                        });
                         console.log("保留小数点后两位:",this.formData.confirm_amount);
                    }
                }
            },

input_amount是change事件触发的,formData.confirm_amount是v-model绑定的值,一开始我是直接给v-model赋值的:this.formData.confirm_amount=subStr;,然后就发现DOM没更新,这让我百思不得其解,而后我在百度了之后看到一个说法是要放在nextTick内: this.$nextTick(()=>{this.formData.confirm_amount=subStr;});,试了一下DOM果然更新了,但是这让我更迷惑了,因为按照Vue官文档的说法,nextTick是DOM更新后才调用的,而我本来的意图是通过修改v-model的值触发DOM更新,但现在实际情况确是反过来了,而且我又试了一下直接给v-model赋一个确定值:this.formData.confirm_amount="111",发现DOM也更新了。。。这下我是彻底蒙蔽了,求大神帮我一把。。。

阅读 17k
3 个回答

貌似是因为el-input组件的问题,它的change事件是用emit调用你自己定义的change事件并回传value值,实际上是将数据更新推入到了异步更新队列中。
如果使用原生的input就不会出现这种问题。
ps:不确定是否这个原因

无法复现你的问题,不管加不加nextTick都是可以触发更新的。
codepen

图片描述

新手上路,请多包涵

同遇见这个问题:
<input v-model="test" @input="set" >

set(){
// this.test=this.test.replace(/\D/g,'');   //在this.$nextTick外部写值改变,视图不更新
this.$nextTick(()=>{
this.test=this.test.replace(/\D/g,'');
});            

},

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题