So I have a v-for loop and 7 different documents from mongo database. Every document contains one food and for each food it has specific number of calories. And I want to sum all the selected calories. For example I got a variable food.calorie_number. Okay so I have something like this:
<tr>
<td v-for="(food) in fetch_breakfast.slice(8,15)" :key=food.id>Meal <p style="border-top: 3px solid #dddddd;">
<select class="form-select" aria-label="Default select example">
<option selected>Select your food</option>
<option v-bind:value="food.id">{{food.food}}</option>
<!-- Every meal has food.calorie_number -->
<option value="3"></option>
</select>
</p></td>
<p>Calorie sum: {{Sum}}</p>
</tr>
I wanted to do something like this: Sum = Sum + food.calorie_number but i didn't get the final solution because I don't know how to do it for a specific element generated by v-for.
If I understood you correctly try like following snippet (with computed and method for selection) :
new Vue({
el: '#demo',
data() {
return {
fetch_breakfast: [{id: 1, food: 'apple', calorie_number: 80}, {id: 2, food: 'peach', calorie_number: 70}, {id: 3, food: 'carrot', calorie_number: 90}],
selected: []
}
},
computed: {
sum() {
return this.selected.reduce((acc, curr) => acc + curr.calorie_number, 0)
}
},
methods: {
getSum(food) {
const idx = this.selected.findIndex(s => s.id === food.id)
idx > -1 ? this.selected.splice(idx, 1) : this.selected.push(food)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table>
<tr>
<td v-for="food in fetch_breakfast" :key=food.id>Meal
<p>
<select class="form-select" @change="getSum(food)">
<option selected>Select your food</option>
<option :value="food.id">{{ food.food }}</option>
</select>
</p>
</td>
<p>Calorie sum: {{ sum }}</p>
</tr>
</table>
</div>First you have v-for on the wrong element because that way it will return 7 select. if you want to have seven options put v-for in select but to have a default option that is not affected by the loop put in option like this:
then do your logic and fetch in either computed value
var selector = new Vue({
el: '#selector',
data: {
selected: null,
meals: [
{'id':1,
"name":"food_name_1",
"calories":"1.6g"
},
{'id':2,
"name":"food_name_g",
"calories":"1.8g"
},
{'id':3,
"name":"food_name_v",
"calories":"1.9g"
},
{'id':9,
"name":"food_name_v",
"calories":"1.66g"
},
{'id':11,
"name":"food_name_y",
"calories":"1.1g"
},
]
},
computed:{
selected_food(){
let id = this.selected
let selected_meal = this.meals.find(meal => meal.id === id)
return selected_meal
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
<select :default="0" v-model="selected">
<option selected="selected" :value=null>select meal</option>
<option v-for="(meal, key) in meals" :key=key :value="meal.id">
{{ meal.name }}
</option>
</select>
<br>
<br>
<div v-if="selected">
<span > Selected food : {{selected_food.name}}</span> </br>
<span > Selected food Calory : {{selected_food.calories}}</span>
</div>
<span v-else>Please select a meal</span>
</div>