javascript - vue.js 强制更新输入元素不起作用

Question

我有一个与 v-model 绑定(bind)到项目值的输入元素，我想将用户输入限制为仅在 0 到 10 之间输入数值>，我之前尝试过这个东西(添加@input 并检查输入值以使其保持在范围内)

我的代码是这样的:

<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;
      }
    }

问题 在我们第一次输入超出范围的数字后，该函数运行良好并将其保持在范围内，但是当我们再次输入超出范围的数字时，元素没有更新，因为新项目值与旧项目值相同!为了解决这个问题，我尝试使用 forceUpdate 并且 $forceUpdate() 不起作用!!!

例如

• 如果用户在输入中输入范围数字之间的任何内容，因为它在范围内，所以一切正常；

• 但是如果用户键入 0 或任何超出范围的数字，如果值小于 1，则第一次将项目值更改为 1 但如果再次键入任何负值，因为项目值上次更改为 1 时我们再次将它设置为 1 View 上没有任何反应，元素值也没有更新。

主要问题是如何强制vue更新这个输入框的值？

Answer 1

  <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>

在这里使用观察者你可以做验证