I am facing an issue with an input of type number where I need to restrict the user from entering a number greater than ten. Initially, everything was working fine until I decided to change the value to an array (from value: 1 to value: [1, 1])
After switching to an array, I tried to set the first number in the array as the input value manually but encountered an error that I am struggling to resolve.
App.vue
<div>
<customInput v-model="value[0]" :max-value="10" />
</div>
<script>
import customInput from "./components/HelloWorld";
export default {
name: "App",
data() {
return {
value: [1, 1],
};
},
components: {
customInput,
},
};
</script>
HelloWorld.vue
<div>
<input :value="value[0]" type="number" @input="onInput" max="10" />
</div>
<script>
export default {
props: {
value: Array,
maxValue: Number,
},
methods: {
onInput(event) {
const newValue = parseInt(event.target.value);
const clampedValue = Math.min(newValue, this.maxValue);
this.$emit("input", clampedValue);
this.$forceUpdate();
},
},
};
</script>
The issue arose when I changed the value to an array. For reference, you can view my code on codesandbox.