我正在使用vue3与options api
如下面的stackbiltz链路here所示
我有input，并且我想将在input中显示的值设置为例如4。每当用户试图输入小于4的值时，这看起来很荒谬，但是当我运行代码时，最初，如果我输入了小于4的值，那么在input中显示的值是4。这种情况是可以的。但是如果我第二次尝试输入另一个小于4的值，则input中的内容或值永远不会更改
你能告诉我怎么做吗？

方案

1st input: for input = 1 => it will change to 4..tha is oK
2nd input: for input = 3 => it will not change to 4...this is not ok because as long as the input is lower than 4, 4 must be displayed in the input box

字符串

注：

i know that if the user successviley attempted to enter values lower than 4, the `input` witll display or will change automatically to be set to 4 for the first attempt only, and for the further attempts the value in the `input` will not change to 4 despite
the user enters values lower than 4 because the `newVal` of the `watcher` does not change. but i do not know how to overcome this problem

型

更新日期：2023年11月13日：

如下面的代码所示，this.§forceUpdate是由SO社区的一个成员推荐使用的。我想知道是否有任何其他可能的解决方案来解决这个问题，而不诉诸this.§forceUpdate？

代码：GUIEpochAgo.vue

<template>
    days ago:
    <input
        type="input"
        :value="compPropsVModelInputDaysAgo"
        @input="$emit('update:compPropsVModelInputDaysAgo', $event.target.value)"
        :disabled="isInputDaysAgoDisabled"
        @change="onInputDaysAgoChanged($event.target.value)"
    />
</template>

<script>

let debugTag = 'D.GUIEpochAgo.vue::';
let infoTag = 'I.GUIEpochAgo.vue::';
let verboseTag = 'V.GUIEpochAgo.vue::';
let warnTag = 'W.GUIEpochAgo.vue::';
let errorTag = 'E.GUIEpochAgo.vue::';
let WTFTag = 'WTF.GUIEpochAgo.vue::';
//
export default {
name: 'GUIEpochAgo',
data() {
    return {
    };
},
components: {},
props: {
    vModelInputDaysAgo: {
        type: null,
    },
    isInputDaysAgoDisabled: {
        type: Boolean,
        default: false,
    },
},
emits: ['vModelInputDaysAgo'],
computed: {
    compPropsVModelInputDaysAgo: {
        get() {
            console.log('get.compPropsVModelInputDaysAgo:', this.vModelInputDaysAgo);
            return this.vModelInputDaysAgo;
        },
        set(value) {
            console.log('set.compPropsVModelInputDaysAgo:', value);
            this.$emit('update:vModelInputDaysAgo', value);
        },
    },
},
methods: {
    onInputDaysAgoChanged(evt) {
        const msg = JSON.stringify({ msg: verboseTag + 'onInputDaysAgoChanged():', evt:evt, typeOfevt:typeof evt });
        console.log(msg);
        if (parseInt(evt) < 4) {
            evt = '4';
        }
        this.compPropsVModelInputDaysAgo = evt;
        this.$forceUpdate()
    },
},
};
</script>

<style>
</style>

型

代码：应用程序版本

<template>
  <div id="app">
   <div class="hello">
     <GUIEpochAgo
        v-model:vModelInputDaysAgo="vModelInputDaysAgo"
    ></GUIEpochAgo>
  </div>
  </div>
</template>

<script>
import GUIEpochAgo from './components/GUIEpochAgo.vue'

export default {
  name: 'App',
  data() {
    return {
      vModelInputDaysAgo: null,
    };
  },
  components: {
    GUIEpochAgo
  },
  watch: {
    vModelInputDaysAgo(newVal, oldVal) {
      if (isFinite(newVal)) {
          const newValAsFloat = parseFloat(newVal);
          if (newValAsFloat < 4) {
              this.vModelInputDaysAgo = '4';
          } else {
              this.vModelInputDaysAgo = newVal;
          }
      } else {
          this.vModelInputDaysAgo = 4;
      }
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

型