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

Question

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

问题是当我将 v-text-field 中的值更改为 -4 时，出现错误显示，但我得到“您选择了 -4”，这不太好。

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

我该如何解决这个问题？

    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>

Answer 1

你可以得到和设置这个

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

并在模板中

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