계산된 속성 내 테스트를 기반으로 소품 전달

Question

Nuxt 3의 computed() 속성에서 간단한 테스트를 하다가 문제가 발생했습니다.

const test = 계산(() => {
  if (process.client) {
    console.log('작동했습니다. 모바일 기기인가요?', window.innerWidth < 768)
    window.innerWidth <
  } 또 다른 {
    console.log('작동하지 않았습니다')
    반품
  }
})

계산된 속성의 결과는 항상 정확하지만 조건에 따라 props를 전달하기 위해 아래 템플릿에서 이를 사용하고 싶습니다.

<로더
 v-if="is로딩"
 :images="테스트 ? Brands.desktopLoaderImages : Brands.mobileLoaderImages"
//>

문제는 결과에 관계없이 Brand.mobileLoaderImages가 항상 내 구성 요소에 props로 전달되는데 그 이유를 알 수 없다는 것입니다.

@vueuse/core와 같은 전용 모듈과 같이 window.innerWidth가 아닌 다른 기술을 사용하여 화면 크기를 결정하려고 시도했지만 그 결과는 다음과 같습니다. 똑같다. 문제는 Vue의 라이프사이클이나 다른 것에서 비롯된 것 같아요.

Answer 1

Vue에서 useBreakpoints nuxt 모듈 을 사용하는 것이 좋습니다사용:

으아악