Javascript 仅当值有效时，如何在Vue中通过v-model对输入应用更改？

我想对vuetify输入进行最小和最大验证

问题是，当我将v-text-field中的值更改为-4时，我会显示一个错误，但是我得到了“youpicked-4”，这不好

我找不到仅当控件有效时才将更改应用于v模型的方法。如果无效，则不要更改最后一个值

我如何解决这个问题

    new Vue({ 
      el: '#app',
      data () {
         return {
           foo: 0,
           rules: {
             required: value => !!value || 'Required.',
             min: v => v >= 5 || `Min 5`,
             max: v => v <= 8 || `Max 8`,
           }
         }
      },
      methods: {
        increment () {
          if (this.foo < 8) {
           this.foo = parseInt(this.foo,10) + 1
          }
        },
        decrement () {
          if (this.foo > 5) {
           this.foo = parseInt(this.foo,10) - 1
          }
        }
      }
    })


    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

    <div id="app">
        <v-app>
          <v-content>
            <v-container>
              <div>You picked: {{foo}}</div>

              <v-text-field 
:rules="[rules.required, rules.min, rules.max]"
v-model="foo" type="number" label="Number" append-outer-icon="add" @click:append-outer="increment" prepend-icon="remove" @click:prepend="decrement"></v-text-field>
            </v-container>
          </v-content>
        </v-app>
      </div>

newvue（{
el:“#应用程序”，
数据（）{
返回{
傅:0,，
规则：{
必需：value=>！！value | |“必需”，
min:v=>v>=5 | | `min 5`，
最大值：v=>v 5）{
this.foo=parseInt（this.foo，10）-1
}
}
}
})
你选了：{{foo}

您可以为此获取和设置

  computed: {
    inputValue: {
      get() {
        return this.foo;
      },
      set(newValue) {
        if (newValue >= 5 && newValue =< 8) {
          this.foo = newValue
        }
      }
    }
  }

计算：{
输入值：{
得到（）{
返回此.foo；
},
设置（新值）{
如果（newValue>=5&&newValue=<8）{
this.foo=newValue
}
}
}
}

和在模板中

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

---

您可以在foo车型上设置观察者：

watch: {
    foo(newValue, oldValue) {
        this.foo =
            newValue >= this.min && newValue <= this.max
                ? newValue
                : oldValue
    }
}

观察：{
foo（新值、旧值）{
这是我的=
newValue>=this.min&&newValue