remove blocked one from the results on real time

src/components/user_autosuggest/user_autosuggest.js

@@ -1,4 +1,5 @@
 import reject from 'lodash/reject'
+import map from 'lodash/map'
 import BlockCard from '../block_card/block_card.vue'
 import userSearchApi from '../../services/new_api/user_search.js'
 
@@ -16,6 +17,14 @@ export default {
       resultsVisible: false
     }
   },
+  computed: {
+    filtered () {
+      return reject(this.results, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+      })
+    }
+  },
   watch: {
     query (val) {
       this.fetchResults(val)
@@ -29,12 +38,8 @@ export default {
         if (query) {
           userSearchApi.search({query, store: this.$store})
             .then((users) => {
-              const filteredUsers = reject(users, (user) => {
+              this.$store.dispatch('addNewUsers', users)
-                return user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+              this.results = map(users, 'id')
-              })
-              this.$store.dispatch('addNewUsers', filteredUsers)
-              this.results = filteredUsers
-              this.resultsVisible = true
             })
         }
       }, debounceMilliseconds)

src/components/user_autosuggest/user_autosuggest.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="user-autosuggest" v-click-outside="onClickOutside">
     <input v-model="query" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" />
-    <div class="user-autosuggest-results" v-if="resultsVisible && results.length > 0">
+    <div class="user-autosuggest-results" v-if="resultsVisible && filtered.length > 0">
-      <BlockCard v-for="user in results" :key="user.id" :userId="user.id"/>
+      <BlockCard v-for="userId in filtered" :key="userId" :userId="userId"/>
     </div>
   </div>
 </template>