Nuxt/Content搭配i18n搜索文章返回空数组问题咨询

核心问题 #

你的watch监听器回调参数使用错误：
Vue的watch监听回调的第一个参数是监听属性变化后的新值，第二个参数是变化前的旧值，不存在你代码中写的{ app, searchQuery }解构对象。你对字符串类型的搜索值强行解构后，app变量实际为undefined，最终拼接的查询路径为/articles/undefined，对应目录不存在，因此返回空数组且无报错。

修正代码 #

直接通过组件实例this访问i18n实例获取当前语言即可：

<script>
export default {
  name: 'SearchInput',
  data() {
    return {
      searchQuery: '',
      articles: []
    }
  },
  watch: {
    async searchQuery(newQuery) {
      if (!newQuery) {
        this.articles = []
        return
      }
      this.articles = await this.$content(`articles/${ this.$i18n.locale }`)
        .limit(6)
        .search(newQuery)
        .fetch()
    }
  }
}
</script>

注：路径开头不需要加/，和你之前直接查询根目录的写法保持一致即可。

内容的提问来源于stack exchange，提问作者stasn