Nuxt.js에서 Vuetify 중단점이 작동하지 않음

Nuxt.js에서 Vuetify 중단점이 작동하지 않음

저는 Nuxt.js를 SSR 엔진으로, Vuetify를 스타일링 프레임워크로 사용하여 프로젝트를 진행하고 있습니다.템플릿 중 하나에 다음과 같은 코드가 있습니다.

<v-layout row wrap align-center 
 :class="{ 'mb-4': $vuetify.breakpoint.smAndDown }">...</v-layout>

보시다시피 mb-4 클래스는 작은 화면과 작은 화면에서만 적용하고 싶습니다.그러나 데스크톱 대화면에 로드하여 요소를 검사하면 화면 해상도가 이 클래스를 적용하기 위한 로직과 일치하지 않아도 이 클래스가 첨부됩니다.그러나 브라우저 창의 크기를 조정하면 스타일링이 다시 예상대로 돌아옵니다.

라이프 사이클 훅에서 수동으로 '크기 조정' 이벤트를 디스패치하려고 했습니다.

mounted() {
   window.dispatchEvent(new Event('resize')); 
}

하지만 소용이 없어.싸도setTimeout아직 운이 안좋아요.

UPD: 회피책을 찾았지만 여전히 최선의 해결책은 아니라고 생각됨: 변경됨

:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"

로.

:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"

및 인mounted라이프 사이클 훅 추가:this.isMounted = true

업데이트: Vuetify 소스 코드를 파헤치는 동안 윈도우 너비 체크는 비용이 많이 들기 때문에 200ms 지연으로 윈도우 너비를 체크합니다.그것이 우리가 지연되는 이유입니다.

여백 속성과 패딩 속성에 대해 특정 중단점을 지정할 수 있습니다.

<v-layout row wrap align-center class="mb-sm-4">...</v-layout>

https://vuetifyjs.com/en/styles/spacing/ # 브레이크 포인트

언급URL : https://stackoverflow.com/questions/50991071/vuetify-breakpoints-not-working-in-nuxt-js