v-model 输入框 输入非法字符 输入框的显示为非法字符不显示绑定的值

Question

电商项目中购买商品输入框中做了逻辑判断输入非法字符不让修改v-model绑定的变量，但是页面还是显示输入的非法字符

              < div class="controls">
                <input autocomplete="off" class="itxt" v-model.lazy="defaultnum">
                <a href="javascript:" class="plus" @click="defaultnumadd">+</a>
                <a href="javascript:" class="mins" @click="defaultnumred">-</a>
              </div>

<script>
data(){
      return{
        num:0
      }
    },
computed:{
 defaultnum:{
      get:function(){
        return this.num
      },
      set:function(newNum){
        if(+newNum??''!==''){
           return this.num=Math.floor(newNum)
        }
        else{
                   return this.num  //这里怎么能做一个刷新之类的操作呢？因为值没变所以他不刷新就会显示非法字符求教！！！！
        }
      }
    }
},
methods:{
   
      defaultnumadd(){
        this.num=+this.num+1 //因为输入的值是字符串所以+this.num转化一下不然就变成拼接了
      },
      defaultnumred(){
        this.num=+this.num-1 
        this.num>=0?this.num:this.num=0

      }
    },
</script>

运行结果及报错内容

如果input输入框 输入一个f 或者其他字母或者非法字符 后 页面就显示这个非法字符 ，我想让他显示我的合法值怎么弄？

我想要达到的结果

让页面显示的和我的绑定值一致

Answer 1

把this.num 先赋值为别的,再赋值回原来的值就可以了

computed: {
    defaultnum: {
        get: function() {
            return this.num
        },
        set: function(newNum) {
            if (!isNaN(Math.floor(newNum))) {
                this.num = Math.floor(newNum)
            } else {
                let r = this.num;
                this.num = -1;
                this.num = r;
            }
        }
    }
},

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!