помогите пожалуйста с кодом.
Как суммировать выбранные значение из массива по переменной 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>
Поможете с кодом ? Заранее спасибо