Javascript vue.js应用filterBy后的密钥总和

HTML:

我是新来的

vue.js

，正在努力找到一种正确的方法来实现“总硬币”的价值

例如：硬币总数等于'30'，因此当我在过滤器框中输入字母“z”时，应用过滤器，“客户z”和“客户Z2”只应可见，硬币总数等于'15'

在

vue.js

中，正确的方法是什么

问之前我做了什么

• 我已经在

  filterQuery

  change上使用了listener，但由于可能会添加更多的过滤器，这并不是很有效
• 已尝试将

  v-model

  添加到

  v-for

  循环中，以便在专用变量中获得过滤结果，但这似乎不会更新模型
为什么不这样做
记住：切勿在

v-for

中使用过滤器！它已被弃用。
为什么不是这个

---

记住：切勿在

v-for

中使用过滤器！它已弃用。
我一直在学习教程，从未见过弃用警告……您可以自由地提出请求；）但说真的，到处都有人反对它。我刚刚意识到你正在使用0.X版本。我们现在已经到了2.0版，为什么要使用这么旧的版本呢？我一直在学习教程，从来没有看到过弃用警告…您可以自由地提出请求；）但说真的，到处都有人反对它。我刚刚意识到你正在使用0.X版本。我们现在的版本是2.0，为什么要使用这么旧的版本？

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

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}
      ]
  }
});

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