规则之树

watch 数据更新,但是视图不更新

最近在写提现功能,要求当小数点后面的数字超过两位就截取掉最后一位,我就在watch中写了一个监听发现数据改变了,但是视图并没有更新,让我有些吐血。

我第一次写的代码

感觉逻辑上没有问题,其实值也改变了,但是没有渲染上。后来问了朋友,说watch是异步的在赋值的时候应该延迟,写个定时器延迟60毫秒,或者用this.$nextTick
this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。

修改后

money(n,m){
    const reg = /^\d+(?:\.\d{1,2})?$/
    if (!reg.test(n)){
        this.$nextTick(()=>{
            let str = n.toString().replace(/[^\d\.]/ig,'');
            if(str.indexOf('.')!=-1){
                let strs = str.split('.');
                str=strs[0]+'.'+(strs[1]||'').substring(0,2)
            }
            this.money = str;
        })
        this.$u.toast('小数点小于等于两位');
    }
}

修改之后美丽多了。

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »