Así que tengo un bucle v-for y 7 documentos diferentes de la base de datos mongo. Cada documento contiene un alimento y para cada alimento tiene un número específico de calorías. Y quiero sumar todas las calorías seleccionadas. Por ejemplo, obtuve una variable food.calorie_number . Bien, entonces tengo algo como esto:
<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> Quería hacer algo como esto: Sum = Sum + food.calorie_number pero no obtuve la solución final porque no sé cómo hacerlo para un elemento específico generado por v-for.
Si lo entendí correctamente, intente como el siguiente fragmento (con cálculo y método para la selección):
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>Primero, tiene v-for en el elemento incorrecto porque de esa manera devolverá 7 select. si desea tener siete opciones, coloque v-for en select pero para tener una opción predeterminada que no se vea afectada por el bucle, ingrese una opción como esta:
luego haga su lógica y obtenga cualquiera de los valores calculados
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>