"@strapi/strapi": "4.12.0",
"nuxt": "^3.6.5",
在我的開發環境中，我有一個專案頁面，帶有一個分類篩選器，可以顯示所有專案或帶有相應專案的分類。
我正在使用useAsyncQuery從Strapi獲取項目和分類。
在篩選器中，有一個下拉式選單，其中包含各種分類。點擊這些分類時，將呼叫函數switchCategory(filter.id)。在該函數中，使用this更新了各種狀態。
請看以下腳本設定：
從“~/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) } 並且在範本元素中：
;< nuxt-link> {{ project.attributes.Title }};
{{ project.attributes.Intro }}
<媒體 :url="project.attributes.FeaturedImage.data.attributes.url" :extension="project.attributes.FeaturedImage.data.attributes.ext" >>
當我建立專案時，使用nuxt build，然後使用node .output/server/index.mjs啟動一個Node伺服器，專案能夠正常載入。但是當我嘗試進行篩選時，試圖在switchCategory函數內更新isLoading和filterActive等變數時，它拋出了錯誤：TypeError: Cannot set properties of undefined (setting 'isLoading')。
修復嘗試#1
我想，也許在構建後，它無法理解this上下文（因為當我嘗試console.log時， this也是undefined）。所以我試著重構程式碼，像這樣：
const switchCategory = (id) => { isLoading = true filterActive = false; document.getElementById("projects-container").scrollIntoView({ behavior: 'smooth', }); setTimeout(() => { if (id && filters) { filters && filters.value.map((item) => { if (id == item.id) { filteredProjects = item.attributes.projects.data; filterActiveText = item.attributes.Title; } }); } else { filteredProjects = projects; filterActiveText = 'Alle projecten'; } isLoading = false; }, 600) } 我將普通函數更改為箭頭函數並刪除了this。
在setTimeout中，我必須將filters.map改為filters.value.map（不太確定為什麼格式改變了）。
現在程式碼運作正常（沒有錯誤），但它沒有更新範本中專案循環的DOM。
修復嘗試 #2
在搜索和調試了相當長時間後，我在Vue文檔中找到了defineExpose的內容。
它提到腳本設定預設是"closed"的。我（絕望地）將其添加到了我的腳本設定中，包括所有變數：
code
defineExpose({ filterRes, projectsRes, pageRes, isLoading, filterActive, filterActiveText, projectsUrl, filters, projects, filteredProjects, }) 不幸的是，正如預期的那樣，它並沒有神奇地起作用。
解決方案？
我很可能是以錯誤的方式來看待這個問題，但我無法想出其他解決方案。
我是否漏掉了什麼？
我不確定能否提供一個完整的可工作的程式碼片段，但也許我可以引導您找到解決方案。
useState只在建置時或元件渲染時可用。因此，在渲染後更改查詢參數不會使其更新。也許在狀態變更後重新渲染元件會有幫助？