javascript - Vuejs动态输入绑定和计算不是一个函数
问题描述
我需要帮助来动态设置输入 v-model。基于下拉选择。我将从后端获取数据。现在,它是一个虚拟数据。
例如,每行将有 3 个输入框。分子、分母和计算值。对于每个输入框,我都传递了 v-model 这样的 form['num_' + idx], form['den_' + idx], form['comp_' + idx]。我在数据(状态)中创建了一个表单对象。
如果我将计算值输入框 (:value) 与计算属性绑定,那么我将无法传递参数。我需要当前的分子、分母值。它给了我一个错误 computedValue is not a function。
现在,我已经尝试将这个 computedValue 函数放在方法部分,并且还在计算的每个输入框旁边添加了一个按钮。我真正需要的是,当分子和分母中的值发生变化时。它会自动计算该值并将其显示在第三个计算输入框中。
计算输入框中的值未显示。有时,如果我更改其他行中的行数据,它会显示价值。
<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>
请指导我。
欢呼满足
解决方案
您需要使用Vue.set
而不是索引[]
来使对象更新具有反应性。
代替:
this.form[`comp_${c}`] = parseFloat(a) / parseFloat(b);
尝试:
Vue.set(this.form, `comp_${c}`, parseFloat(a) / parseFloat(b));
推荐阅读
- c - 如何在 _start 中使用 argv?
- c# - 来自 API 的 JsonConvert.DeserializeObject 对象,使用 Webclient 可能是 2 种对象类型之一
- python - 如何让程序在 Python 中完成后重新运行
- html - 全新的 CSS,无法弄清楚如何为我的每个 html 段落正确编码不同的类/属性值
- django-rest-framework - 类型错误:+= 不支持的操作数类型:“datetime.timedelta”和“NoneType”
- html - 如何使 html 灯箱响应?
- google-apps-script - Google脚本仅使用值和格式复制工作表
- html - 如何在引导程序 4 中创建响应式布局
- git - 推送到 GitHub 时远程挂断
- javascript - 如何在不使用 setTimeout 的情况下这样做?