Получить список элементов динамически в соответствии с результатом фильтрации - PullRequest
Новая
       21

Получить список элементов динамически в соответствии с результатом фильтрации

0 голосов
/ 14 февраля 2020

Мое приложение отображает общее количество сообщений, первоначально в соответствии с ответом сервера.

Однако эти сообщения могут быть отфильтрованы, и мне нужно получить количество сообщений динамически в соответствии с результатом фильтрации. 

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

Спасибо.

1 Ответ

1 голос
/ 15 февраля 2020

Вы можете создать свойство computed, которое будет возвращать вам фильтрованный массив на основе примененного запроса / фильтров.

Другое свойство computed будет возвращать вам длину фильтрованного массива, т.е. рассчитывать, чтобы показать на 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>
...