1

我的 nuxt 项目中有一个带有搜索字段的搜索页面。

当我输入搜索词并提交时，它会为 URL 设置一个查询参数，/search/?q=searchword但当我进行新搜索时页面没有更新。它更新 q 参数，但不调用 asyncData 来获取结果。

我试图设置watchQuery: ['q']无济于事。

我有这个 asyncData

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

我已经设置了这个

  watchQuery: ['q']

显然，我错过了一些东西，但我不知道是什么。

用 HTML 编辑

<div class="form-wrapper">
        <form>
          <input type="text" name="q" :value="fieldValue" placeholder="Type and hit enter" />
        </form>
        <div v-if="!!fieldValue" class="num-results">Found {{ products.length }} {{ products.length === 1 ? 'product' : 'products' }}</div>
      </div>

      <div class="search-result">
        <ProductList v-if="products.length !== 0">
          <ProductWidget v-for="product in products" :key="product.id" :product="product" />
        </ProductList>
      </div>
</div>
4

1 回答 1

1

asyncData 仅在页面加载时运行。因此更新 的值q不会触发对您的 API 的另一个调用——您需要构建一个方法来处理它。

<form @submit="callAPI">
  <input type="text" :value="fieldValue" placeholder="Type and hit enter" />
  <button type="submit">New Search</button>
</form>

export default {
  ...
  methods: {
    callAPI() {
      try {
        // Query to get post content
        let products = await // api call code...
        
        this.products = products.results,
        
    } catch (e) {
      // Returns error page
      error({ statusCode: 404, message: 'Page not found' })
    }
  }
  ...
}
于 2020-11-02T14:02:42.020 回答