查询未在 nuxt 中更新
Query not updating in nuxt
我的 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>
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' })
}
}
...
}
我的 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>
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' })
}
}
...
}