ビルド中に「this」を使用して関数内の useState を更新すると、未定義のエラーが発生します - Nuxt 3 および Strapi 4.12 - SFC (スクリプト セットアップ)
<p><br /></p><h2>
</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;"> import { projectQuery } から "~/queries/projects/archive"; import { filterQuery } から "~/queries/projects/filter"; const { データ: filterRes } = useAsyncQuery(filterQuery) を待ちます const { データ:projectsRes } = useAsyncQuery(projectsQuery) を待ちます var isLoading = useState('isLoading', () => false) var filterActive = useState('filterActive', () => false) var filterActiveText = useState('filterActiveText', () => 'すべてのプロジェクト') const projectUrl = useState('projectsUrl', () => '/projecten/') const filters = useState('filters', () => filterRes.value.projectCategories.data) const project = useState('projects', () =>projectsRes.value.projects.data) var filteredProjects = useState('filteredProjects', () => プロジェクト) 関数 switchCategory(id) { this.isLoading = true this.filterActive = false; document.getElementById("プロジェクトコンテナ").scrollIntoView({ 動作: 'スムーズ'、 }); setTimeout(() => { if (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': !isLoading、 'ぼかし': isLoading、 }"> <div class="grid md:grid-cols-2 gap-8 md:gap-16 lg:gap-24相対" v-for="(project, id) in filteredProjects" :key="id"> <Nuxt-Link class="absolute inset-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-5xl font-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="プロジェクト.属性.注目画像.データ.属性.url" :extension="プロジェクト.属性.注目画像.データ.属性.ext" /> </div> </div> </div> </div></pre> <p>プロジェクトをビルドし、nuxt build を使用してから、node .output/server/index.mjs を使用して Node サーバーを起動すると、プロジェクトは正常にロードできます。しかし、switchCategory 関数内で isLoading や filterActive などの変数を更新しようとしてフィルタリングしようとすると、次のエラーがスローされます: TypeError: Cannot set property of unknown (setting 'isLoading') <br /><br />修正試行 #1<br /><br />おそらくビルド後、このコンテキストが理解できないのではないかと思いました (console.log を実行しようとすると、これも未定義です）。そこで、次のようにコードをリファクタリングしようとしました。 <pre class="brush:php;toolbar:false;">const switchCategory = (id) => { isLoading = true フィルターアクティブ = false; 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 = false; }、600) }</pre> <p>通常の関数をアロー関数に変更し、これを削除しました。 <br /><br />setTimeout で、filters.map を filters.value.map に変更する必要がありました (形式が変更された理由はよくわかりません)。 <br /><br />現在、コードは正常に実行されています (エラーはありません)。ただし、テンプレート内の項目ループの DOM は更新されていません。 <br /><br />修正試行 #2<br /><br />かなり長い間検索してデバッグした後、Vue ドキュメントでdefineExpose の内容を見つけました。 <br /><br />スクリプト設定はデフォルトで「閉じられている」と記載されています。私は（必死で）これをすべての変数を含むスクリプト設定に追加しました。 <pre class="brush:php;toolbar:false;">defineExpose({ フィルター解像度、 プロジェクトの解像度、 ページレス、 読み込み中、 フィルターアクティブ、 フィルターアクティブテキスト、 プロジェクトの URL、 フィルター、 プロジェクト、 フィルターされたプロジェクト、 })</pre> <p>残念ながら、予想通り、魔法のようにはいきませんでした。 <br /><br />解決策はありますか? <br />おそらくこれは間違った見方をしていますが、他の解決策は思いつきません。<br /><br />何か足りないことがありますか? </p>
</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;"> import { projectQuery } から "~/queries/projects/archive"; import { filterQuery } から "~/queries/projects/filter"; const { データ: filterRes } = useAsyncQuery(filterQuery) を待ちます const { データ:projectsRes } = useAsyncQuery(projectsQuery) を待ちます var isLoading = useState('isLoading', () => false) var filterActive = useState('filterActive', () => false) var filterActiveText = useState('filterActiveText', () => 'すべてのプロジェクト') const projectUrl = useState('projectsUrl', () => '/projecten/') const filters = useState('filters', () => filterRes.value.projectCategories.data) const project = useState('projects', () =>projectsRes.value.projects.data) var filteredProjects = useState('filteredProjects', () => プロジェクト) 関数 switchCategory(id) { this.isLoading = true this.filterActive = false; document.getElementById("プロジェクトコンテナ").scrollIntoView({ 動作: 'スムーズ'、 }); setTimeout(() => { if (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': !isLoading、 'ぼかし': isLoading、 }"> <div class="grid md:grid-cols-2 gap-8 md:gap-16 lg:gap-24相対" v-for="(project, id) in filteredProjects" :key="id"> <Nuxt-Link class="absolute inset-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-5xl font-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="プロジェクト.属性.注目画像.データ.属性.url" :extension="プロジェクト.属性.注目画像.データ.属性.ext" /> </div> </div> </div> </div></pre> <p>プロジェクトをビルドし、nuxt build を使用してから、node .output/server/index.mjs を使用して Node サーバーを起動すると、プロジェクトは正常にロードできます。しかし、switchCategory 関数内で isLoading や filterActive などの変数を更新しようとしてフィルタリングしようとすると、次のエラーがスローされます: TypeError: Cannot set property of unknown (setting 'isLoading') <br /><br />修正試行 #1<br /><br />おそらくビルド後、このコンテキストが理解できないのではないかと思いました (console.log を実行しようとすると、これも未定義です）。そこで、次のようにコードをリファクタリングしようとしました。 <pre class="brush:php;toolbar:false;">const switchCategory = (id) => { isLoading = true フィルターアクティブ = false; 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 = false; }、600) }</pre> <p>通常の関数をアロー関数に変更し、これを削除しました。 <br /><br />setTimeout で、filters.map を filters.value.map に変更する必要がありました (形式が変更された理由はよくわかりません)。 <br /><br />現在、コードは正常に実行されています (エラーはありません)。ただし、テンプレート内の項目ループの DOM は更新されていません。 <br /><br />修正試行 #2<br /><br />かなり長い間検索してデバッグした後、Vue ドキュメントでdefineExpose の内容を見つけました。 <br /><br />スクリプト設定はデフォルトで「閉じられている」と記載されています。私は（必死で）これをすべての変数を含むスクリプト設定に追加しました。 <pre class="brush:php;toolbar:false;">defineExpose({ フィルター解像度、 プロジェクトの解像度、 ページレス、 読み込み中、 フィルターアクティブ、 フィルターアクティブテキスト、 プロジェクトの URL、 フィルター、 プロジェクト、 フィルターされたプロジェクト、 })</pre> <p>残念ながら、予想通り、魔法のようにはいきませんでした。 <br /><br />解決策はありますか? <br />おそらくこれは間違った見方をしていますが、他の解決策は思いつきません。<br /><br />何か足りないことがありますか? </p>
