Question

在以下模板中，Math.round()与v-model一起使用时出现问题：

<v-text-field v-model="rounded" />

rounded是一个计算属性：

rounded: {
  get() {
    return this.value; 
  },
  set (val) {
    this.value = Math.round(val);
    console.log(this.value);
  }
}

在v-text-field中看到的预期结果：

   Input    |  Expected Value  |  Actual Value
===============================================
   1.12     |       1          |   1.12
   1.6      |       2          |   2

为什么当我输入v-text-field时1不显示1.12？

Answer 1

主要原因是，您正在更改值而不是舍入变量，因此，如果您像下面这样，希望您的问题能够解决。

  <v-text-field v-model="rounded" :value="val" @change="OnChange" />

并将val属性添加到数据块中：

    data(){
    return:{
    val:0.00
    }
   }

无需为计算属性做任何事情，只需将OnChange方法写入方法块，如下所示：

methods:{
OnChange(newVal){
this.val = Math.round(newVal);
this. rounded=this.val;
 }
}

Answer 2

观察值并更新它，而不是绑定到计算的属性。

<v-text-field v-model="rounded" />

    {
      data() {
          return {
            rounded: 0
          }
        },

        watch: {
          rounded(val) {
            let newVal = Math.round(val);
            if (newVal !== val) {
                this.val = newVal
            }
            // or even simply this.val = Math.round(this.val) without the check ...
          }
        }
    }

Math.round（）作为v模型返回值

2 个答案: