Как суммировать выбранные значение из массива?

@synapse · Регистрация: 29.10.2010

Author24 — интернет-сервис помощи студентам

помогите пожалуйста с кодом.

Как суммировать выбранные значение из массива по переменной age(в моем случае), Выборка происходит по клику на input=radio или checkbox То есть например: если выбрано 1 radio и 3 значение checbox показывать сумма выбранных на экран в блоке Total age:

Ну и если убирать галочку или radio, тогда Total age меняется

Мой код:

Javascript

    var app = new Vue({
      el: '.app',
      data: {
        user: {},
          logins:[
              {name:'Jhon', age:11, price:1000},
              {name:'Richard', age:12, price:2000},
              {name:'Robert', age:13, price:3000},
              {name:'Jack', age:14, price:4000}
          ],
          selectedLogins:[],
      },
      methods: {
        clearRadio() {
          this.user = {}
        }
      },
    });

HTML5

<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 
<div class="row app">
  <div class="col-6">
    <div class="border p-3 h-100">
      <div class="font-weight-bold pt-2">Коробка</div>
 
      <input type="radio" v-bind:value="{name:'Tom', age:22}" v-model="user">
      <label>Tom</label>
      <br>
      <input type="radio" v-bind:value="{name:'Bob', age:25}" v-model="user">
      <label>Bob</label>
      <br>
      <input type="radio" v-bind:value="{name:'Sam', age:28}" v-model="user">
      <label>Sam</label>
      <br>
 
      <div class="font-weight-bold pt-2">Продукты</div>
      <template v-for="login in logins">
          <input type="checkbox" v-bind:value="login" v-model="selectedLogins">
          <label>{{login.name}}</label><br>
      </template>
    </div>
  </div>
 
  <div class="col-6">
    <div class="border p-3 h-100">
      <ul class="nav flex-column">
        <li v-if="user.name" class="nav-link">{{user.name}} {{user.age}}
          <button class="btn btn-sm py-0 btn-danger" @click="clearRadio">x</button>
        </li>
        <li class="nav-link" v-for="login in selectedLogins">{{login.name}} - {{login.age}} - {{login.price}}
          <input type="checkbox" v-bind:value="login" v-model="selectedLogins">
        </li>
      </ul>
 
      <hr>
      <span class="pl-3">Total age: {{ totalAges }}</span>
    </div>
  </div>
 
</div>

Так же код в редакторе: https://jsfiddle.net/synapse3/7tw0m6gy/1/

Поможете с кодом ? Заранее спасибо

@j2FunOnly · 28.10.2020, 15:15

Javascript

var app = new Vue({
  el: '.app',
  data: {
    /* omit for brevity */
  },
  methods: {
    /* omit for brevity */
  },
  computed: {
    ages() {
      return this.selectedLogins.reduce((sum, login) => sum + login.age, 0);
    },
    userAge() {
      return this.user.age || 0;
    },
    totalAges() {
      return this.ages + this.userAge;
    }
  }
});

	28.10.2020, 15:15

Как суммировать выбранные значение из массива?

Решение