<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) 함수가 호출됩니다. 이 함수에서는 이를 이용하여 다양한 상태를 업데이트합니다.<br /><br />请查看以下脚本设置：</p><p><code></code></p> <pre class="brush:php;toolbar:false;"> "~/queries/projects/archive"에서 { projectsQuery }를 가져옵니다. "~/queries/projects/filter"에서 { filterQuery }를 가져옵니다. const { data: filterRes } = useAsyncQuery(filterQuery)를 기다립니다. const { data: projectsRes } = useAsyncQuery(projectsQuery)를 기다립니다. var isLoading = useState('isLoading', () => false) var filterActive = useState('filterActive', () => false) var filterActiveText = useState('filterActiveText', () => '모든 투영') const projectsUrl = 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 = 거짓; document.getElementById("projects-container").scrollIntoView({ 행동: '부드럽다', }); setTimeout(() => { 만약 (ID) { this.filters.map((항목) => { if (id == item.id) { this.filteredProjects = item.attributes.projects.data; this.filterActiveText = item.attributes.Title; } }); } 또 다른 { this.filteredProjects = this.projects; this.filterActiveText = '모든 투영'; } this.isLoading = 거짓; }, 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 easy-in-out" :class="{ 'blur-0': !isLoading, '흐림': isLoading, }"> <div class="grid md:grid-cols-2 gap-8 md:gap-16 lg:gap-24 상대" v-for="(project, id) infilteredProjects" :key="id"> <Nuxt-Link class="절대 삽입-0 w-full h-full z-10" :to="projectsUrl + project.attributes.Slug"></Nuxt-Link> <div class="flex flex-col items-start justify-between"> <div class="sticky top-40 pb-16 lg:pb-20 prose-xl"> <h3 class="text-xl md:text-4xl lg:text-5xlfont-bold">{{ project.attributes.Title }}</h3> <p class="block">{{ project.attributes.Intro }}</p> </div> <Button class="flex mb-4" color="light" :to="projectsUrl + project.attributes.Slug"> 프로젝트 베키켄 </버튼> </div> <div class="-order-1 md:order-1 상대"> <div class="aspect-video md:aspect-square lg:aspect-[12/18] 상대"> <미디어 :url="project.attributes.FeaturedImage.data.attributes.url" :extension="project.attributes.FeaturedImage.data.attributes.ext" /> </div> </div> </div> </div></pre> <p>프로젝트를 빌드할 때 nuxt build를 사용한 다음 node .output/server/index.mjs를 사용하여 Node 서버를 시작하면 프로젝트가 정상적으로 로드될 수 있습니다. 그러나 필터링을 시도할 때 switchCategory 함수 내에서 isLoading 및 filterActive와 같은 변수를 업데이트하려고 하면 다음 오류가 발생합니다. TypeError: Cannot set Properties of un Defined (setting 'isLoading'). <br /><br />Fix Attempt #1<br /><br />빌드 후에는 이 컨텍스트를 이해하지 못할 수도 있다고 생각했습니다( 왜냐하면 console.log를 시도할 때 때문입니다). , 이것도 정의되지 않았습니다). 그래서 다음과 같이 코드를 리팩터링해 보았습니다. <pre class="brush:php;toolbar:false;">const switchCategory = (id) => isLoading = 사실 필터액티브 = 거짓; document.getElementById("프로젝트-컨테이너").scrollIntoView({ 행동: '부드럽다', }); setTimeout(() => { if (id && 필터) { 필터 &&filters.value.map((item) => { if (id == item.id) { filteredProjects = item.attributes.projects.data; filterActiveText = item.attributes.Title; } }); } 또 다른 { FilteredProjects = 프로젝트; filterActiveText = '모든 투영'; } isLoading = 거짓; }, 600) }</pre> <p>일반 함수를 화살표 함수로 변경하고 이를 제거했습니다. <br /><br />setTimeout에서 filter.map을 filter.value.map으로 변경해야 했습니다(형식이 변경된 이유는 확실하지 않습니다). <br /><br />이제 코드는 제대로 실행되지만(오류 없음) 템플릿에 있는 항목 루프의 DOM이 업데이트되지 않습니다. <br /><br />Fix Attempt #2<br /><br /> 꽤 오랫동안 검색하고 디버깅한 끝에 Vue 문서에서 DefineExpose 내용을 발견했습니다. <br /><br />스크립트 설정은 기본적으로 "닫혀있다"고 언급되어 있습니다. 나는 (필사적으로) 모든 변수를 포함하여 이것을 내 스크립트 설정에 추가했습니다: </p><p><code></code><em></em></p> <pre class="brush:php;toolbar:false;">defineExpose({ 필터 해상도, 프로젝트Res, 페이지 해상도, 로드 중, 필터활성, 필터활성텍스트, 프로젝트URL, 필터, 프로젝트, 필터링된프로젝트, })</pre> <p>안타깝게도 예상한 대로 마술처럼 작동하지 않았습니다. <br /><br />해결책은요? <br />아마도 잘못된 방향으로 보고 있는 것 같지만 다른 해결책이 생각나지 않습니다.<br /><br />제가 뭔가 놓치고 있는 게 있나요?