Vue.js как суммировать выбранные значение из массива

Question

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

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

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

Мой код:

    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 = {}
        }
      },
    });

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

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

Answer 1

   var app = new Vue({
      el: '.app',
      data: {
        user: {},
        totalAges: 0,
          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 = {},
          this.sumTotalAge();
        },
        sumTotalAge(){
          this.totalAges = this.selectedLogins.reduce((acc,item) => acc += item.age, 0) + (this.user.age ? this.user.age : 0);
        }
      },
    });

<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" v-on:change="sumTotalAge">
      <label>Tom</label>
      <br>
      <input type="radio" v-bind:value="{name:'Bob', age:25}" v-model="user" v-on:change="sumTotalAge">
      <label>Bob</label>
      <br>
      <input type="radio" v-bind:value="{name:'Sam', age:28}" v-model="user" v-on:change="sumTotalAge">
      <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" v-on:change="sumTotalAge">
          <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" v-on:change="sumTotalAge">
        </li>
      </ul>

      <hr>
      <span class="pl-3">Total age: {{ totalAges }}</span>
    </div>
  </div>

</div>

БЛОГ НА HUSL

Vue.js как суммировать выбранные значение из массива

Ответы (1 шт):