Question

我有一个将v模型绑定到项目值的输入元素，我想限制用户输入的值只能是介于 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，视图上没有任何反应，并且元素值未更新。

主要问题是如何强制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>

使用观察者，您可以进行验证

Answer 2

当最终结果始终相同时，强制反应性的唯一方法是重新渲染组件以通过更新其 key 来反映更改。

Reference link here.

我已经从 sample Vue project 分叉了 mdiaz00147，并修改为 this，我认为它按作者的预期工作。

从 mdiaz00147 的代码片段修改的解决方案代码

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

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

2 个答案: