javascript - vue.js force update input element not working - Stack Overflow

admin管理员组

文章数量:1391985

I have an input element that bind with v-model to a item value, I want to limit the user input to just type numeric value on range between 0 to 10, I was tried this thing before(add @input and check the input value to keep it in range)

my code is like this:

<v-text-field @input="checkItem" v-model="item"></v-text-field>

checkItem(val) {
      if(parseInt(val) < 1) {
        this.item = 1;
      } else if(parseInt(val) >10) {
        this.item = 10;
      }
    }

Problem after first time we type number out of range the function works great and keep it in range but when we type out of range number again the element didn't update because the new item value is the same as the old item value! to solve this I try to use forceUpdate and the $forceUpdate() not work!!!

for example

• if user type anything between range number into input, because it's in range everything is ok;

• but if user type 0 or any number outside of range, on the first time item value change to 1 if value was under 1 but if again type any negative value because the item value last time was changed to 1 when we set it to 1 again nothing happening on the view and the element value was not updated.

The main question is how to force vue to update this input field value?

I have an input element that bind with v-model to a item value, I want to limit the user input to just type numeric value on range between 0 to 10, I was tried this thing before(add @input and check the input value to keep it in range)

my code is like this:

<v-text-field @input="checkItem" v-model="item"></v-text-field>

checkItem(val) {
      if(parseInt(val) < 1) {
        this.item = 1;
      } else if(parseInt(val) >10) {
        this.item = 10;
      }
    }

Problem after first time we type number out of range the function works great and keep it in range but when we type out of range number again the element didn't update because the new item value is the same as the old item value! to solve this I try to use forceUpdate and the $forceUpdate() not work!!!

for example

• if user type anything between range number into input, because it's in range everything is ok;

• but if user type 0 or any number outside of range, on the first time item value change to 1 if value was under 1 but if again type any negative value because the item value last time was changed to 1 when we set it to 1 again nothing happening on the view and the element value was not updated.

The main question is how to force vue to update this input field value?

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow edited Jun 1, 2019 at 13:57 RonU 5,80433 gold badges2020 silver badges1313 bronze badges asked Feb 28, 2019 at 0:25 newvertexnewvertex 18055 silver badges1616 bronze badges 2

• Have you tried watching for changes using a watch method rather than binding to input? Modifying the model data in an input hook is not intended usage of v-model – rh16 Commented Feb 28, 2019 at 0:32
• @rh16 if you mean use :value to bind item value from data object and change the item on the watch from input change, I have to say yes I was tried this before and got the same problem(the view part is not update because of the value is not changed) – newvertex Commented Feb 28, 2019 at 1:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

  <div><input type="number" v-model="item"></input></div>
</template>

<script>
export default {
  name: "ranges",

  data() {
    return {
      item: Number,
      error: String
    };
  },

  watch: {
    item(newVal, lastVal) {
      if (newVal > 10) this.item = 10
      if (newVal < 1) this.item = 1
    }
  }
};
</script>

Here using the watcher you can do that validation

The only way to force the reactivity when the the final result is always the same, is to re-render the ponent for it to reflect the changes by updating its key.

Reference link here.

I have forked the sample Vue project from mdiaz00147, and modify into this, and I think it works as the author intended it to be.

Solution Code modified from mdiaz00147 's code snippet

<template>
  <div>
    <input :key="inputKey" v-model="item" @change="checkItem" />
  </div>
</template>

<script>
export default {
  name: "ranges",

  data() {
    return {
      item: null,
      inputKey: 0,
    };
  },

  methods: {
    checkItem() {
      if (parseInt(this.item) < 1) {
        this.item = 1;
      } else if (parseInt(this.item) > 10) {
        this.item = 10;
      }
      this.inputKey += 1;
    },
  },
};
</script>

I found a very simple workaround for me to be the following when validating. These are the steps:

1. simply set the value to be the wrong un validated value first and only set it on blur or change (not input because it will auto-blur)
2. then run your validation logic and update the data.item (this will now work since it knows it changed)

in code all you have to change:

checkItem(val) {
  this.item = val; // add this
  if(parseInt(val) < 1) {
    this.item = 1;
  } else if(parseInt(val) >10) {
    this.item = 10;
  }
}

Just make sure you only pass the value up or "use" the value after validation pletes, expect the value to be outside of your validation parameters in watches and putes.

本文标签： javascriptvuejs force update input element not workingStack Overflow