Bestehen Sie Requisiten basierend auf Tests innerhalb berechneter Eigenschaften

Question

Bei einem einfachen Test in der Eigenschaft computed() von Nuxt 3 ist ein Problem aufgetreten.

const test = berechnet(() => {
  if (process.client) {
    console.log('Funktioniert. Handelt es sich um ein mobiles Gerät?', window.innerWidth < 768)
    return window.innerWidth <
  } anders {
    console.log('Hat nicht funktioniert')
    zurückkehren
  }
})

Das Ergebnis der berechneten Eigenschaft ist immer korrekt, aber ich möchte es in der Vorlage unten verwenden, um Requisiten bedingt zu übergeben.

<Loader
 v-if="isLoading"
 :images="Test ? Brands.desktopLoaderImages: Brands.mobileLoaderImages"
/>

Das Problem besteht darin, dass brand.mobileLoaderImages unabhängig vom Ergebnis immer als Requisiten an meine Komponente übergeben wird und ich nicht herausfinden kann, warum.

Ich habe versucht, eine andere Technik als window.innerWidth zu verwenden, z. B. ein dediziertes Modul wie @vueuse/core, aber das Ergebnis ist das gleiche. Ich vermute, das Problem könnte im Lebenszyklus von Vue liegen oder so?

Answer 1

建议使用useBreakpoints从VueUse中使用它的nuxt模块：

const breakpoints = useBreakpoints()

const test  = breakpoints.smaller('md')