Is there a way I can use Vue.js to multiply values in a table? The values provided are for 100g of the product. For example, if I input 200g, I would like the values to double: 318kcal, 12 fat, 48 carbs, 8 protein, and 2% iron. Similarly, inputting 50g should give me: 79.6kcal, 3 fat, 12 carbs, 2 protein, 0.5 iron, etc.
Check out the demo code here
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: {
}
})