HTML:
<div id="app">
<h1>{{title}}</h1>
<form id="search">
Filter <input name="query" v-model="filterQuery">
</form>
<table>
<tr v-for="client in clients | filterBy filterQuery">
<td>{{ client.name }}</td>
<td>{{ client.coins }}</td>
</tr>
</table>
<b>Total Coins: ???</b>
</div>
JS:
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}
]
}
});
Exploring the possibilities of vue.js is a new adventure for me. I'm currently facing a challenge in calculating the 'Total Coins' value based on filtering.
For instance, the total sum of coins is 30. If I input the letter "z" in the filter box, the filter should only display "Client Z" and "Client Z2" with a total of coins equal to 15.
What would be the most efficient approach to achieve this in vue.js?
Before seeking assistance, I attempted the following:
- Implemented a listener on
filterQuerychange, but this method is not scalable with additional filters. - Tested adding
v-modelto thev-forloop to get filtered results in a separate variable, but the model did not update as expected.