Vuejs动态输入绑定 computed不是函数
我需要帮助来动态设置输入v-model。基于下拉选择。我会从后台获取数据。现在,它是一个虚拟数据。
ScreenShot
例如,每行将有3个输入框。分子、分母和计算值。对于每个输入框,我都传递了v-model,形式为‘’num_‘+ idx,形式为’‘den_’+ idx,形式为‘’comp_‘+ idx。我已经在data(state)中创建了一个表单对象。
如果我将计算值输入框(: value )与计算属性绑定,那么我就不能传递参数。我需要当前分子,分母的值。它给我一个错误,computedValue不是一个函数。
现在,我已经尝试将此computedValue函数放入methods部分,并在计算出的每个输入框旁边添加了一个按钮。我真正需要的是,当分子和分母中的值发生变化时。它会自动计算该值,并将其显示在第三个计算的输入框中。
计算输入框中的值未显示。有时,如果我更改其他行中的行数据,它会显示值。
<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>
请给我引路。
欢呼相遇
转载请注明出处:http://www.intsu.net/article/20230523/1472627.html