I have two text inputs which are linked by their v-model to a ref that is an object, I have two more refs: minimum(100) and maximum(1000) which I am looking for is to be able to write in these inputs between the range of minimum and maximum, but if the value that I write is less than the minimum, it will automatically show the minimum value (100), if it is greater than the maximum, it will show the maximum.
<input type="text" v-model="number.one" class="one" @input="validate"/>
<input type="text" v-model="number.two" class="two" @input="validate"/>
const min = ref(100)
const max = ref(1000)
const numbers = ref({
one: 100,
two: 100
})
const validate = () => {
if(e.target.className === 'one'){
if(numbers.value.one <= min.value){
numbers.value.one = min.value
}else if(numbers.value.one > max.value){
numbers.value.one = max.value
}
}
}
I do this, but from here it no longer lets me write anything in the input, I think I know it's because numbers.value.one is now equal to the minimum so I can't modify it anymore, but how can I change the amounts?