計算されたプロパティ内のテストに基づいて props を渡す

Question

<p>Nuxt 3 の <code>computed()</code> プロパティの簡単なテストで問題が発生しました。 </p> <pre class="brush:php;toolbar:false;">const test = computed(() => { if (プロセス.クライアント) { console.log('正常に動作しました。モバイル デバイスですか?', window.innerWidth < 768) window.innerWidth を返します < 768 } それ以外 { console.log('動作しませんでした') 戻る } })</pre> <p>計算されたプロパティの結果は常に正しいですが、それを以下のテンプレートで使用して条件付きでプロパティを渡したいと考えています。 </p> <pre class="brush:php;toolbar:false;"><ローダー v-if="isLoading" :images="テスト ? ブランド.デスクトップローダーイメージ: ブランド.モバイルローダーイメージ" /> <p>問題は、結果に関係なく、brands.mobileLoaderImages が常に props としてコンポーネントに渡されるのですが、その理由がわからないことです。 </p> <p><code>window.innerWidth</code> 以外の別の手法を使用して画面サイズを決定しようとしましたが、<code>@vueuse/core</code> のような専用モジュールを使用しましたが、結果は同じ。問題は Vue のライフサイクルか何かにあるのではないかと思います。 </p>

Answer 1

useBreakpoints を使用することをお勧めします。VueUse の nuxt モジュールを使用します。 :

リーリー