javascript - How to apply change to input by v-model in Vue only when the value is valid? - Stack Overflow

admin管理员组

文章数量:1022935

I want to do min and max validation for my vuetify input.

The problem is when I change the value in v-text-field to -4 then I have an error show but I got "You picked -4" and that not okay.

I can't find a way to apply change to v-model only when the control is valid. if not valid then do not change the last value.

How can I solve this issues?

    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=':100,300,400,500,700,900|Material+Icons' rel="stylesheet">
    <link href=".min.css" rel="stylesheet">
    <script src=".5.17/vue.js"></script>
    <script src=".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>

I want to do min and max validation for my vuetify input.

The problem is when I change the value in v-text-field to -4 then I have an error show but I got "You picked -4" and that not okay.

I can't find a way to apply change to v-model only when the control is valid. if not valid then do not change the last value.

How can I solve this issues?

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

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow asked Jul 16, 2019 at 7:58 Jon SudJon Sud 11.8k3131 gold badges104104 silver badges228228 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can you get and set for this

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

and in template

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

You can set watcher on model foo:

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

I want to do min and max validation for my vuetify input.

The problem is when I change the value in v-text-field to -4 then I have an error show but I got "You picked -4" and that not okay.

I can't find a way to apply change to v-model only when the control is valid. if not valid then do not change the last value.

How can I solve this issues?

    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=':100,300,400,500,700,900|Material+Icons' rel="stylesheet">
    <link href=".min.css" rel="stylesheet">
    <script src=".5.17/vue.js"></script>
    <script src=".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>

I want to do min and max validation for my vuetify input.

The problem is when I change the value in v-text-field to -4 then I have an error show but I got "You picked -4" and that not okay.

I can't find a way to apply change to v-model only when the control is valid. if not valid then do not change the last value.

How can I solve this issues?

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

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow asked Jul 16, 2019 at 7:58 Jon SudJon Sud 11.8k3131 gold badges104104 silver badges228228 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can you get and set for this

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

and in template

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

You can set watcher on model foo:

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

本文标签： javascriptHow to apply change to input by vmodel in Vue only when the value is validStack Overflow