根据过滤结果动态获取项目列表计数

Question

我的应用程序显示总 post 秒计数，最初是根据服务器的响应。

但是这些post是可以过滤的，我需要根据过滤结果动态获取post个数

inputFilter:function() {
   var vm = this;
   return vm.posts.filter((post) => {
        var vmPosts = post.title.match(searchValue);
        var countFilteredPostsDinammicaly = vmPosts.count(); //??????
        return vmPosts;
   });
}

谢谢。

Answer 1

您可以创建一个 computed 属性，这将 return 您根据应用的 query/filters 过滤数组。

另一个 computed 属性将 return 过滤数组的长度，即过滤 post 计数显示在 DOM.

new Vue({
  el: '#app',
  
  data: {
   posts: [
    { title: 'apple is best fruit' },
    { title: 'orange is 2020 best fruit' },
    { title: 'apples are sweeter than oranges in 2020' }
   ],
   query: ''
  },
  
  computed: {
   getFilteredPosts () {
    return this.posts.filter(post => post.title.includes(this.query))
   },
   getFilteredPostsCount () {
    return this.getFilteredPosts.length
   }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 
 <input placeholder="search for `apple`" v-model="query"/>
 <br/><br/>
 
 Filtered posts count: {{ getFilteredPostsCount }}
 <br/><br/>
 
 Filtered posts:
 <li v-for="(post, i) in getFilteredPosts" :key="i">
  {{ post.title }}
 </li>
 
</div>

根据过滤结果动态获取项目列表计数

Get items list count dynamically according to the filtering result

list

count

vue.js

quasar