我有代码使用vuejs手表属性对React输入。代码链接是https://playcode.io/1264493
这里你可以看到，当尝试输入名为“百分比”的值时，它会重新计算该值。这是预期的，因为它正在被监视，其他输入也正在被监视。有没有什么方法可以做到这一点，而不会导致这种抖动行为以外的使用超时。也到2位小数的精度。实际上，它不应该跳过小数点的末尾，然后输入值应该很容易。除了少数几个输入外，所有输入都会发生这种情况。例如，在“百分比”输入上输入值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>
1条答案
按热度按时间zfycwa2u1#
我认为你不应该创建两个手表，将修改对方的价值观，因为他们可以触发对方多次。
我更喜欢使用一个当你输入时就会执行的函数。