I'm struggling with dynamically setting the v-model for inputs based on dropdown selection. Currently, I am using dummy data and need help to fetch actual data from the backend.
Take a look at the screenshot.
For example, each row has three input boxes: numerator, denominator, and computed value. I have assigned v-models like form['num_' + idx], form['den_' + idx], form['comp_' + idx] respectively. These are part of a form object in the data (state).
The issue arises when I try to bind the computed value input box using a computed property as I cannot pass arguments and receive an error stating that computedValue is not a function.
I've attempted placing the computedValue function in the methods section and added a button next to each computed input box. However, what I really need is for the computed value input box to automatically calculate and display the result whenever the numerator or denominator values change.
Unfortunately, the computed input box does not always show the correct value. Sometimes it only updates when changing data in other rows.
<template>
<div>
<select v-model="service">
<option disabled value="">Please select one</option>
<option>Order to cash</option>
</select>
<select @change="changeAccountEvent($event)" >
<option disabled value="">Please select one</option>
<option>Nissan</option>
<option>Ford</option>
</select>
<div>
<ul>
<li v-for="(d,idx) in data" :key="d.metric">
<div class="flex px-4 py-2">
<div class="w-1/4">{{d.metric}}</div>
<div class="w-1/4 mr-2">
<input v-model="form['num_' + idx]" type="number">
</div>
<div class="w-1/4 mr-2">
<input v-model="form['den_' + idx]" type="number">
</div>
<input v-model="form['comp_' + idx]" type="number" >
<button
@click="computedValue(form['num_' + idx], form['den_' + idx], idx, d.formula)">get value
</button>
<!-- :value="computedValue(form['num_' + idx], form['den_' + idx]) -->
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
service: '',
account: '',
data: null,
form: {
},
};
},
methods: {
computedValue(a, b, c, d) {
console.log('a -> ', a, 'b -> ', b, 'c -> ', c, 'd -> ', d);
this.form[`comp_${c}`] = parseFloat(a) / parseFloat(b);
console.log(this.form);
},
changeAccountEvent(event) {
if (this.service !== '') {
this.account = event.target.value;
if (this.account === 'Ford') {
const fordData = [
{ metric: 'Days Sales Outstanding', formula: '/' },
{ metric: 'Past due percent', formula: '/' },
{ metric: 'Days', formula: '/' },
{ metric: 'percent', formula: '/' },
];
this.data = fordData;
}
if (this.account === 'Nissan') {
const nisData = [
{ metric: 'Days Sales Outstanding', formula: '/' },
{ metric: 'Past due percent', formula: '/' },
];
this.data = nisData;
}
} else {
// event.target.value = '';
alert('please select service line');
}
},
},
};
</script>
Your guidance will be highly appreciated.
Cheers, Meet