인프런 커뮤니티 질문&답변
작성한 질문수
script setup 태그 유무에 따라서 페이지 출력이 안됩니다.
해결된 질문
작성
·
355
0
<template>
<q-page class="q-pa-xl">
<section class="q-mb-xl">
<div class="text-h4">Breakpoints</div>
<q-separator class="q-my-md" />
<div class="target"></div>
</section>
<section class="q-mb-xl">
<div class="text-h4">$q.screen</div>
<q-separator class="q-my-md" />
<div>
{{ $q.screen }}
</div>
</section>
</q-page>
</template>
<script>
export default {
mounted() {
console.log('this.$q.screen: ', this.$q.screen);
},
};
</script>
<script setup>
import { userQuasar } from 'quasar';
const $q = userQuasar();
console.log('setup -> $q.screen: ', $q.screen);
</script>
<style lang="scss" scoped>
.target {
height: 200px;
background-color: $dark;
}
@media (max-width: $breakpoint-xs-max) {
.target {
background-color: $red;
}
}
.target {
body.screen--sm & {
background-color: $orange;
}
}
</style>
08:41 초에서 진행하는 userQuasar 를 script setup 태그 안에 임포트하고 실행하면 어떠한 오류도 없이 빈 화면만 출력되고 있습니다. script setup 을 주석 처리하면 정상적으로 breakpoints 페이지로 이동하고 정상 출력이 됩니다. 영상 따라서 하고 있는데 저는 왜 setup 태그 유무에 따라 빈 화면이 출력하는 걸까요 ..?
답변 3
0
짐코딩
지식공유자
엄...
저 소스에서 만약에
<!--
<script setup>
import { userQuasar } from 'quasar';
const $q = userQuasar();
console.log('setup -> $q.screen: ', $q.screen);
</script>
-->이 부분을 주석 처리 하신다면 <template>내에서 $q Object에 접근할 수 없기 때문에 에러가 발생할 거에요 빈페이지가 나오는 브라우저에서 개발자도구 콘솔을 보시면 에러가 보일듯 합니다.
만약 주석 처리하실 거면
<script>
export default {
mounted() {
console.log('this.$q.screen: ', this.$q.screen);
},
setup() {
// 이곳에서 $q Object를 생성하고 리턴해줘야 합니다.
}
};
</script>만약 Vue3 기본편을 수강하지 않으셨다면 꼭! 보시는 것을 권장드립니다 🥲 👍
0
0
감사합니다! 잘 해결했습니다 :)
포지션이 백엔드인데... 프론트엔드도 맡게 되가지고 프로젝트에 CSS 랑 부트스트랩을 뷰에 적용을 너무 못하고 한 세월 걸려서 포기 직전이었어요ㅜㅜㅠ 퀘이사 올려주신 강의를 각 기능마다 페이지로 깔끔하게 너무 설명 잘해주신 덕분에 길이 보이고 있습니다 ㅜㅜ 감사합니다!