Alexander Alexander - 1 year ago 148
Javascript Question

vue.js sum of keys after applying filterBy


<div id="app">
<form id="search">
Filter <input name="query" v-model="filterQuery">
<tr v-for="client in clients | filterBy filterQuery">
<td>{{ }}</td>
<td>{{ client.coins }}</td>
<b>Total Coins: ???</b>


var app = new Vue({
el: "#app",
data: {
title: "Demo app",
clients: [
{name: "client X", coins: 5},
{name: "client Y", coins: 10},
{name: "client Z", coins: 3},
{name: "client Z2", coins: 12}

Fiddle Here

I am new to
and struggling to find a right way of making 'Total Coins' value.

For example : Total sum of coins is equal '30', so when i enter the letter "z" in to the filter box, the filter is applied, "Client Z" and "Client Z2" only should be visible and the total of coins would be equal '15'.

What is the right way to do it in

What have i done before asking ?

  • I have done this using listener on
    change , but this is not efficient as more filters may be added.

  • Have tried to add
    to the
    loop so i can get filtered results in a dedicated variable, but this does not seem to update the model.

Answer Source

Why not this

computed: {
    filteredClients: function () {
    return this.clients.filter(c => !== -1)
  totalCoins: function () {
    return this.filteredClients.reduce((a, b) => a + b.coins, 0)

Remember: never use filters in v-for! It's deprecated.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download