英文:
How to bring precision to 2 decimals and smooth input entering
问题
我有一个使用Vue.js的代码，使用watch属性来响应式地监测输入。代码链接是 https://playcode.io/1264493
在这里，当尝试输入名为'percentage'的值时，它会重新计算该值。这是预期的，因为它正在被监测，而另一个输入也在被监测。有没有办法在不使用超时的情况下避免这种抖动行为？而且需要保留小数点后2位的精度。实际上，它不应该跳到小数点的末尾，输入值应该是容易的。这种情况并不是对所有输入都发生，只有少数几个输入会出现问题。例如，在'percentage'输入上输入值7会显示奇怪的行为。计算属性也有相同的问题。
以下是你的代码：
<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>
英文:
I have code which use vuejs watch property on to reactive inputs. The code link is
https://playcode.io/1264493
Here are you can see when trying to input values named 'percentage' it recalculates the value. thats expected as its being watch and the other input is also being watched. Is there any way I can do it without causing this jittery behaviour other that using time out. Also to a precision of 2 decimals. Actually it should not jump the end of decimal and then inputing value should be easy. It dosent happend with all input except few.. example entering value 7 on 'percentage' input will show a wierd behaviour. The same happens with the computed also.
CODE IS ATTACHED HERE TOO
<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>
答案1
得分: 1
I think you shouldn't create 2 watches that will modify each other value because they could trigger each other multiple times.
I prefer to use a function that will execute when you type.
<script setup>
import { reactive, watch } from 'vue'
const data = reactive({
first: 50000,
second: 20000,
percentage: ''
})
const handlePercentage = () => {
data.second = (data.first * Number(data.percentage)) / 100
}
const handleSecond = () => {
data.percentage = (Number(data.second) / 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" @input="handleSecond">
</div>
<div>
<label>Percentage</label>
<input type="text" v-model="data.percentage" @input="handlePercentage">
</div>
</div>
</template>
英文:
I think you shouldn't create 2 watches that will modify each other value because they could trigger each other multiple times.
I prefer to use a function that will execute when you type.
<script setup>
import {reactive, watch} from 'vue'
const data = reactive({
first : 50000,
second : 20000,
percentage : ''
})
const handlePercentage = () => {
data.second = (data.first*Number(data.percentage))/100
}
const handleSecond = () => {
data.percentage = (Number(data.second)/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" @input="handleSecond">
</div>
<div>
<label>Percentage</label>
<input type="text" v-model="data.percentage" @input="handlePercentage">
</div>
</div>
</template>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论