[Vuejs]-How to add real time search with VueJS?

by

0👍

✅

I think a computed property is better here to have the "real-time" changes, and a .filter to get the filtered list matching search:

new Vue({
  el:"#app",
  data() {
    return {
      search: "",
      users: ['Dummy', 'Users', 'From', 'Backend'],
    };
  },
  computed: {
    filteredUsers(){
      return this.users.filter(user =>
        user.toLowerCase().includes(this.search.toLowerCase())
      );
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="search"/>{{filteredUsers}}
</div>

0👍

For real-time search using API, you can use WATCH

Can be applied sorted on FIREBASE
https://firebase.google.com/docs/database/web/lists-of-data

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount')

There may be inconsistencies in the code, but I wanted to convey the essence

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="search"/>{{filteredUsers}}
</div>

new Vue({
  el:"#app",
  data() {
    return {
      search: null, 
      users: []     
    };
  },
  computed: {
    filteredUsers(){
      return this.users.filter(user =>
        user.toLowerCase().includes(this.search.toLowerCase())
      );
    },  
  },
  watch: {
      watchUser(search) {
       if (search) {
       this.searchPerson()
      }
    },              
 },
 methods: {  
   searchPerson() {
        this.loading = true;
        this.fetchUsers()
          .then(res => {
            this.users = normalizeResponse(res)
            this.loading = false          
          })
      },
      fetchUsers() {
        return axios({
          method: 'get',
          url: '',
          params: {        
          },
          headers: {
            'Content-type': 'application/json'
          }
        });
      },
    }
 });

Leave a comment