检查nuxt中的空查询参数

Question

我的 Prismic/Nuxt 项目上有一个搜索页面，可以对 Prismic API.

进行全文查询

这段代码可以做到这一点

export default {
  name: 'Search',
  async asyncData({ $prismic, params, query, error }) {
    try {
      // Query to get post content

      const products = await $prismic.api.query($prismic.predicates.fulltext('my.product.title', query.q), { orderings: '[my.product.title desc]' })
      // Returns data to be used in template
    
      return {
        products: products.results,
      }
    } catch (e) {    
      // Returns error page
      error({ statusCode: 404, message: 'Page not found' })
    }
  },
}

URL是/search/?q=somesearch

问题是，如果我在没有查询参数的情况下点击 /search/，它会立即命中错误 Unable to encode undefined of type undefined，显然是因为它试图用未定义的值查询 API ，但我似乎无法找到如何进行有效检查以在未设置查询时不查询 API，而是只显示搜索框。

我试过

if query.q !== undefined

在 try 部分，但这不起作用。

Answer 1

要检查未定义的值，您可以使用：

if (typeof query.q !== 'undefined')

typeof returns 数据类型为字符串，这使得检查未定义的值成为可能。

检查nuxt中的空查询参数

Checking empty query parameter in nuxt

html

javascript

vue.js

prismic.io

nuxt.js