Question

我有一个带有搜索输入的标题栏，该输入在整个布局中共享。当用户输入（键入）术语时，我必须重定向到搜索页面结果：

/ search？term = blah

我正在重定向传递的术语，但是只要用户继续输入更多字母/术语，我就无法获取该数据。只是第一学期。

SearchForm组件：

this.$router.push(`/search?term=${this.term}`)

搜索页（nuxt）

mounted () {
   this.search(this.$route.query.term)
},
methods: {
    search (term) {
      axios.get(`https://api.com/search?search=${term}`)
        .then(res => (this.results = res.data))
    }
}

但是仅当输入第一个字母时才调用搜索方法，因为我正在使用keyup事件重定向到搜索路径。如何解决此解决方案，以便在每次键入时都调用搜索方法？还是有更好的方法来解决这个问题？

谢谢。

Answer 1

我建议您使用lodash的debounce()函数之类的东西，以便等到用户（可能）完成键入之后再重定向。 Vue在watchers上的文档中实际上有一个很好的例子。

如果您决定在项目中包含lodash（可能已经包含了lodash），则可以执行以下操作：

created() {
  this.debouncedSearch = _.debounce(this.search, 500)
},
methods: {
  search (term) {
    axios.get(`https://api.com/search?search=${term}`)
      .then(res => (this.results = res.data))
    }
  }
},
watch: {
  search: function(term) {
    this.debouncedSearch();
  }
}

您的搜索页面可能需要使用自己的搜索表单/输入，以便允许用户在重定向到搜索页面后继续优化搜索。

如何重定向并获取url参数

1 个答案: