如何使用 VueJS 添加实时搜索？答案

【问题标题】：How to add real time search with VueJS?如何使用 VueJS 添加实时搜索？
【发布时间】：2021-02-01 18:32:45
【问题描述】：

我想添加实时搜索以查找在我的 twitter 克隆上注册的其他用户。因此，用户在后端 (Firebase)

backend 和 example 上的用户我想要的搜索。

这是我的尝试：

<script>
    export default {
      data() {
        return {
          search: "",
          users: ['Dummy', 'Users', 'From', 'Backend'],
        };
      },
      methods: {
        findUser(){
            const result = this.users.find(user => user.includes(this.search))
            console.log(result)
        },
      },
    };
    </script>

我做错了什么？

【问题讨论】：

标签： javascript firebase vue.js

【解决方案1】：

我认为computed 属性在这里更好地进行“实时”更改，.filter 以获得匹配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>

【讨论】：

是的，你的方法行得通，但是如果我写D，它显示Dummy和BackenD，即所有包含相同字母的结果，应该是吗？不过还是谢谢:)
@JOKER 这取决于您是否需要大小写比较，如果需要，请删除 .toLowerCase

【解决方案2】：

对于使用 API 的实时搜索，您可以使用 WATCH

可以在 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')

代码中可能存在不一致，但我想传达本质

<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'
          }
        });
      },
    }
 });

【讨论】：