【Vuetify】 Nuxt의 SSR에서 Vuetify의 DatePicker를 사용하면 "The client-side rendered virtual DOM tree is not matching server-rendered content. "라는 오류 발생
현상
SSR에서 Vuetify의 DatePicker를 사용하면
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.라는 오류 발생해결책
조사해 보면
tableにtbodyを入れると解決する 라는 것.htps : // 이 m / k5690033 / ms / d1에 436fd3b92fc1 661
그러나 이번에는 컴포넌트를 통째로 사용하고 있기 때문에 이것이 불가능하다.
no-ssr 사용
DatePicker에 관해서는 ssr 할 필요가 원래 없기 때문에
no-ssr 에 둘러싸고 해결했다.htps : // 기주 b. m/nu xt/nu xt. js/이스에 s/1700
<no-ssr>
<v-date-picker
v-model="picker"
:landscape="landscape"
:reactive="reactive"
:full-width="fullWidth"
:show-current="showCurrent"
:type="month ? 'month' : 'date'"
:multiple="multiple"
:readonly="readonly"
:disabled="disabled"
:events="enableEvents ? functionEvents : null"
></v-date-picker>
</no-ssr>
Reference
이 문제에 관하여(【Vuetify】 Nuxt의 SSR에서 Vuetify의 DatePicker를 사용하면 "The client-side rendered virtual DOM tree is not matching server-rendered content. "라는 오류 발생), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/bbapexx/items/955c4ac0319322d3148f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
