<p><br /></p><h2><br /></h2>
<p><code>"@strapi/strapi": "4.12.0",</code></p>
<p><code>"nuxt": "^3.6.5",</code></p>
<p>在我的開發環境中，我有一個專案頁面，帶有一個分類篩選器，可以顯示所有專案或帶有相應專案的分類。 <br /><br />我正在使用useAsyncQuery從Strapi獲取項目和分類。 <br /><br />在篩選器中，有一個下拉式選單，其中包含各種分類。點擊這些分類時，將呼叫函數switchCategory(filter.id)。在該函數中，使用this更新了各種狀態。<br /><br />請看以下腳本設定：</p><p><code></code></p>
<pre class="brush:php;toolbar:false;">
從“~/queries/projects/archive”導入{projectsQuery}；
從“~/queries/projects/filter”導入{filterQuery}；
const { 資料：filterRes } = 等待 useAsyncQuery(filterQuery)
const { 資料：projectsRes } = 等待 useAsyncQuery(projectsQuery)
var isLoading = useState('isLoading', () => false)
var filterActive = useState('filterActive', () => false)
var filterActiveText = useState('filterActiveText', () => '所有項目')
const itemsUrl = useState('projectsUrl', () => '/projecten/')
const 過濾器 = useState('filters', () => filterRes.value.projectCategories.data)
const 專案 = useState('projects', () =>projectsRes.value.projects.data)
var FilteredProjects = useState('filteredProjects', () => 項目)
函數 switchCategory(id) {
this.isLoading = true
this.filterActive = false;
document.getElementById("projects-container").scrollIntoView({
行為：“平滑”，
});
setTimeout(() => {
如果（id）{
this.filters.map((item) => {
if (id == item.id) {
this.filteredProjects = item.attributes.projects.data;
this.filterActiveText = item.attributes.Title;
}
});
} 別的 {
this.filteredProjects = this.projects;
this.filterActiveText = '所有項目';
}
this.isLoading = false;
}, 600)
}</pre>
<p>並且在範本元素中：</p>
<pre class="brush:php;toolbar:false;"><div class="flex flex-col gap-y-8 md:gap-y-24 lg:gap-y-40 過渡所有持續時間-600 緩入出" :class="{
'blur-0': !正在載入,
'模糊'：正在加載，
}">
{{ project.attributes.Title }};
<p class="block">{{ project.attributes.Intro }}</p>
我不確定能否提供一個完整的可工作的程式碼片段，但也許我可以引導您找到解決方案。
useState只在建置時或元件渲染時可用。因此，在渲染後更改查詢參數不會使其更新。也許在狀態變更後重新渲染元件會有幫助？