Question

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

Fiddle Here

我是vue.js的新手，并努力寻找一种正确的方法来制作“总金币”。值。

例如：硬币的总和相等＆＃39; 30＆＃39;所以当我输入字母＆＃34; z＆＃34;在过滤器框中，应用过滤器，＆＃34;客户端Z＆＃34;和＆＃34;客户Z2＆＃34;只应该是可见的，并且硬币的总数将相等＆＃39; 15＆＃39;。

在vue.js中执行此操作的正确方法是什么？

在问之前我做了什么？

我在filterQuery更改时使用侦听器完成了此操作，但由于可能会添加更多过滤器，因此效率不高。
已尝试将v-model添加到v-for循环，以便我可以在专用变量中获得过滤结果，但这似乎不会更新模型。

Answer 1

为什么不呢

https://jsfiddle.net/f5d16skc/

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

请记住：永远不要在v-for中使用过滤器！它被弃用了。

vue.js应用filterBy后的键总和

1 个答案: