javascript - Vue在数据表中相乘
问题描述
如何使用 Vue.js 将表中的值相乘?宏观值是针对 100 克产品给出的。当我输入 200g 时,我希望数值翻倍,即 318kcal、12 脂肪、48 碳水化合物、8 蛋白质、2% 铁。当我输入 50g 时:79.6kcal、3 脂肪、12 碳水化合物、2 蛋白质、0.5 铁等。
演示代码 在这里
HTML:
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" hide-default-footer>
<template v-slot:item.quantity="{ item }">
<v-text-field value="" :placeholder="item.quantity" type="number" suffix="g">
</v-text-field>
</template>
</v-data-table>
</v-app>
</div>
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
{ text: 'Quantity', value: 'quantity' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
quantity: 0,
},
],
}
},
computed: {
}
})
解决方案
如果dessert[].quantity
表示单个份量的量,您可以将v-text-field
's绑定到将用于计算乘数v-model
的数据属性(例如,名为“ ”):userQuantities
<template v-slot:item.quantity="{ item, index }">
<v-text-field v-model="userQuantities[index]"></v-text-field>
</template>
export default {
data() {
return {
userQuantities: []
}
}
}
然后创建一个基于乘数计算营养价值的计算属性(例如,命名为“ ”),乘数是用户数量与单份份量的比率:computedDesserts
export default {
computed: {
computedDesserts() {
return this.desserts.map((dessert,i) => {
const qty = this.userQuantities[i] || dessert.quantity
const multiplier = qty / (dessert.quantity || 1)
return {
...dessert,
calories: dessert.calories * multiplier,
fat: dessert.fat * multiplier,
carbs: dessert.carbs * multiplier,
protein: dessert.protein * multiplier,
iron: `${parseInt(dessert.iron) * multiplier}%`,
}
})
}
}
}
并更新您的模板以使用computedDesserts
而不是desserts
:
<v-data-table :items="computedDesserts">
推荐阅读
- python - 有人可以向我解释为什么在等于 self.list 的列表上使用 pop() 也会让 self.list pop 排在最后
- sql - 尝试显示与表 3 相关的表 1 的 ID
- http - 如何使用自定义服务在 oauth 期间调试 Rocket Chat 错误?
- bash - 在 shell 脚本中使用带有完整路径名的二进制文件是否被认为是一种好习惯?
- php - preg_replace 在包含重复符号的字符串上
- oracle - 如何解决 Oracle DBMS_SCHEDULER.CREATE_JOB 问题?
- css - 如何将我的按钮设置为位于屏幕底部
- r - 所有的 `stargazer()` 表都放在我文档的末尾
- android - 带有姓名和电子邮件的 Android 自定义联系人 ListView
- c# - 如果满足条件,如何停止运行任务列表