Javascript vue.js强制更新输入元素不工作

我有一个输入元素，它与v-model绑定到一个项目值，我想将用户输入限制为仅键入介于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;
      }
    }

检查项目（val）{
if（parseInt（val）<1）{
本项目=1；
}如果（parseInt（val）>10，则为else）{
本项目=10；
}
}

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

$forceUpdate（）

不起作用

例如

• 若用户在输入中键入范围编号之间的任何内容，因为它在范围内，所以一切正常

• 但是，如果用户键入0或超出范围的任何数字，则在第一次时，如果值小于1，则项目值将更改为1，但如果再次键入任何负值，则因为上次将项目值设置为1时，项目值将更改为1。再次将其设置为1，则视图中不会发生任何事件，并且元素值未更新

主要问题是如何强制vue更新此输入字段值？

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


导出默认值{
名称：“范围”，
数据（）{
返回{
项目：编号，
错误：字符串
};
},
观察：{
项目（新值、上次值）{
如果（newVal>10）this.item=10
如果（newVal<1）this.item=1
}
}
};

---

在这里，您可以使用watcher进行验证

您是否尝试过使用

watch

方法而不是绑定到输入来监视更改？修改输入钩子中的模型数据不是

v-model

@rh16的预期用途。如果您的意思是使用：value从数据对象绑定项目值，并从输入更改更改更改手表上的项目，我必须说是，我以前尝试过此操作，但遇到了相同的问题（视图部分未更新，因为值未更改）感谢您的回答，但我不想向用户显示消息，我想在用户键入时用正确的值替换用户输入值（当前代码更新数据对象值，但不更新组件的视图部分，因为数据对象上的值与以前相同，然后vue认为没有发生任何更改）@Mojtaba我刚刚更新了代码以完成你所说的，让我知道这是否是你想要的。绝对正确，谢谢你，但为什么第二个条件有时会出现问题并接受它为零？！？事实上，在@input回调之前我从未使用过，可能是有问题，我建议您在这种情况下使用更好的watch方法或computed方法，主要的更新问题没有得到解决！，当我们第一次尝试在输入中键入0时，它会更新为1，但之后vue devtool上的值为1，但屏幕输入元素上的值为0！如果我们输入像1000这样的最大值，也会出现同样的问题。然后我们需要重新命名输入元素以保持其更新