Xiaobai, recently in the study vue.js, wrote 3 input boxes to do automatic summation, and now it is possible to do automatic summation for the first column input box. Now think of a requirement and display the corresponding value range at the bottom of each input box, as shown in the following figure:
in this way, we can know the interval range of each group, for example, the first group is in [0 ~ 10%) and the second group is in [10 ~ 30%).
I don"t have any ideas right now, so I have written some code as follows:
<template>
<div id="app">
<form action="" :model="inputValues">
<br>
<span>Total Percentage: {{sum}}</span>
<div v-for="item in inputValues">
<br>
<input type="text" v-model="item.percentage" placeholder="percentage">
<input type="text" v-model="item.group" placeholder="group">
<br><br>
//
//{{sum}}
<span> [{{previous_sum}}% ~ {{sum}}%)</span>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
inputValues: [
{
percentage:"",
group:""
},
{
percentage:"",
group:""
},
{
percentage:"",
group:""
}
]
}
},
computed: {
//
sum() {
return this.inputValues.reduce((total,value) => {
return Number.isNaN(parseFloat(value.percentage)) ?
total :
total + parseFloat(value.percentage)
},0);
},
//
// previous_sum = sum - current_inputValues
// = -
//
previous_sum(){
var previous_sum = 0;
this.inputValues.forEach((item)=>{
previous_sum = sum - parseFloat(item.percentage);
})
}
}
}
</script>
Please give us some advice on how to modify the code in this situation. My brother"s foundation is weak. Please give me more advice. Thank you