I implemented code that utilizes the vuejs watch property on reactive inputs. You can check out the code by following this link:
When entering values in the 'percentage' input, it recalculates the value as expected due to watching, causing some jittery behavior. Is there a way to achieve this without using a timeout and maintain a precision of two decimals? The input process should be smooth without any sudden jumps. This issue seems to occur with certain inputs, for example, entering '7' in the 'percentage' input shows strange behavior. The same problem also arises with the computed components.
The code snippet is provided below:
<script setup>
import {reactive, watch} from 'vue'
const data = reactive({
first : 50000,
second : 20000,
percentage : ''
})
watch(() => data.percentage,
(newValue, oldValue) => {
data.second = (data.first*newValue)/100
}
)
watch(() => data.second,
(newValue, oldValue) => {
data.percentage = (newValue/data.first)*100
}
)
</script>
<template>
<div>
<div>
<label>First</label>
<input type="text" v-model="data.first">
</div>
<div style="padding: 15px 0px">
<label>Second</label>
<input type="text" v-model="data.second">
</div>
<div>
<label>Percentage</label>
<input type="text" v-model="data.percentage">
</div>
</div>
</template>