How to sum selected values in option tag-CodePudding

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  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.

CodePudding user response：

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  @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>

CodePudding user response：

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>