Vuejs 搜索功能无法正常工作答案

【问题标题】：Vuejs search function doesn't work properlyVuejs 搜索功能无法正常工作
【发布时间】：2021-09-21 13:34:02
【问题描述】：

我的导航栏组件中有一个搜索栏，使用 Axios，我可以过滤文章。

export default {
  data() {
    return {
      articles: [],
      article: {},
      search: '', 
    }
  },
  methods: {
    getArticles() {
      const url = `${baseApiUrl}/search?search=${this.search}`;
      axios(url).then((res) => {
        this.articles = res.data;
      });
    }
  },
  watch: {
    search() {
      const route = {
        name: 'searchArticles'
      }
      if(this.search !== '') {
        route.query = {
          search: this.search
        }
      }
    },
    '$route.query.search': {
      immediate: true,
      handler(value) {
        this.search = value
      }
    }
  },
};
</script>

<template>
  <header class="navbar">
  
    <form class="searchInput">
      <input  v-model="search" @keyup.enter="getArticles()" placeholder="Search..." />
      <router-link :to="{ path: '/search', query: { search: this.search }}">
      <button type="submit">
        <font-icon class="icon" :icon="['fas', 'search']"></font-icon>
      </button>
      </router-link>
    </form>
    
  </header>
</template>

我有我的 searchResult 组件来呈现搜索结果。

export default {
  data() {
    return {
      articles: [],
      article: {},
      search: ''
    }
  },
  created() {
    const url = `${baseApiUrl}/search?search=${this.search}`;
    axios(url).then((res) => {
      this.articles = res.data;
    });
  },
  watch: {
    search() {
      const route = {
        name: 'searchArticles'
      }
      if(this.search !== '') {
        route.query = {
          search: this.search
        }
      }
    },
    '$route.query.search': {
      immediate: true,
      handler(value) {
        this.search = value
      }
    }
  },
};
</script>

<template>
  <div>
    <div class="result-search">  
      <ul>
        <li v-for="(article, i) in articles" :key="i">
          <ArticleItem :article="article" />
        </li>
      </ul>
    </div>
  </div>
</template>

当我第一次搜索时，它会将我带到 /search?... 并显示搜索结果，但如果我在字段中输入另一个值，我的 URL 就会从 /search?search=a 更改为 /search? search=b 并且结果仍然是搜索 A 的结果，只有当我重新加载页面时，它才会给我带来搜索 B 的结果。为什么会发生？我的所有内容都通过

以我的内容组件为中心

我的应用组件：

<template>
  <div id="app">
    <Header :hideUserDropdown="!user" />
    <Loading v-if="validatingToken" />
    <Content v-else />
    <Footer />
  </div>
</template>

【问题讨论】：

您是否尝试只返回一个值？不是this.search = value，而是return value
如果我只返回值，它会带给我所有文章，而不是通过搜索参数过滤。
将文章 getter 移动到另一个方法并调用 watch。创建组件时只调用一次创建的方法。
感谢我创建的这项工作，将 getter 移动到一个方法并在 '$route.query.search' 中调用它

标签： javascript vue.js

【解决方案1】：

用于搜索数据的 axios 调用当前存在于您的 created 挂钩中。这意味着它只会在该页面/组件的初始加载时运行。

将您的搜索功能移动到一个方法中并从您的观察者调用它，即

watch: {
  '$route.query.search': {
    immediate: true,
    fetchArticles(value)
  }
},
methods: {
  async fetchArticles(val) {
    let url = `${baseApiUrl}/search?search=${val}`
    try {
      let res = await axios(url)
      this.articles = res.data
    } catch (error) {
      console.log(`An error occurred attempting to fetch articles with search term of ${val}: `, error)
    } finally {
      // do something here if you need
    }
  }
}

如果您遇到困难，Vue 文档非常棒。这是 Vue 生命周期钩子的链接以及何时可以使用它们:)

Vue lifecycle hooks

【讨论】：