q-input과 :rules 속성을 함께 쓸때, items-cen... - 인프런

퀘이사(Quasar) 완벽 마스터: Vue 프론트 웹을 빠르게 만들고 싶다면! (Based Vue3)

QForm - Form Handling (with Validation)

q-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상

작성

157

안녕하세요

q-span과 q-input을 나란히 배치하는 UI를 만들고 있습니다.
세로 중앙정렬을 위해서 Container에 item-center 옵션을 사용하고 있는데, q-input에 :rules 속성만 주면 중앙 정렬이 깨지네요.
어떻게 해야 세로 중앙정렬이 가능할까요?
아래는 제가 시도해본 4가지 상황입니다.

ps. 글쓰는거 코드랑 함께 넣는거 어렵네요. ㅠㅠ

<template>
  <q-page>
    <!-- 유효성 검사 없이 items-center -->
    <div class="row q-mt-md bg-primary">
      <div class="row full-width items-center">
        <q-span class="text-h6 col-3" align="right">신청자</q-span>
        <q-span class="col-1"></q-span>
        <q-input class="" dense outlined v-model="userName" />
      </div>
    </div>

    <!-- 유효성 검사와 items-center 모두 없음 -->
    <div class="row q-mt-md bg-primary">
      <div class="row full-width">
        <q-span class="text-h6 col-3" align="right">신청자</q-span>
        <q-span class="col-1"></q-span>
        <q-input class="" dense outlined v-model="userName" />
      </div>
    </div>

    <!-- 유효성 검사와 items-center 모두 존재-->
    <div class="row q-mt-md bg-primary">
      <div class="row full-width items-center">
        <q-span class="text-h6 col-3" align="right">신청자</q-span>
        <q-span class="col-1"></q-span>
        <q-input class="" dense outlined v-model="userName" :rules="['text']" />
      </div>
    </div>

    <!-- 유효성 검사 존재하고 items-center 없을 경우 -->
    <div class="row q-mt-md bg-primary">
      <div class="row full-width">
        <q-span class="text-h6 col-3" align="right">신청자</q-span>
        <q-span class="col-1"></q-span>
        <q-input class="" dense outlined v-model="userName" :rules="['text']" />
      </div>
    </div>
  </q-page>
</template>

vue.js quasar

답변 1

짐코딩

지식공유자

안녕하세요.

답변) Flex Container와 Flex Item 을 위한 요소 추가

<div class="row q-mt-md bg-primary">
  <div class="row full-width items-center">
    <div class="col-3"> <!-- Flex Item을 위한 요소 추가 -->
      <q-span class="text-h6" align="right">신청자</q-span>
    </div>
    <div class="col-1">
       <q-span></q-span>
    </div>
    <div class="col">
      <q-input class="" dense outlined v-model="userName" />
    </div>
  </div>
</div>

PS. <q-span> 컴포넌트는 따로 정의하신 컴포넌트일까요? 퀘이사 스펙에서 제공하지 않는 컴포넌트여서요.

leon hong

질문자

<q-span> 컴포넌트는 chat-gpt로 함께 작업하다가 나온 키워드로써, 지금까지 이것으로 작업했었는데 문제없이 동작이 되어서 당연히 존재하는 건지 알았습니다.

하지만 공식홈페이지 가보니까 저런 컴포넌트는 존재하지 않아서 <span>으로 변경하는것이 맞습니다.

그런데 희안하게 <span>과 <q-span>은 동일하게 동작합니다.

그리고 제가 질문을 애매하게 드린거 같은데, q-input에 :rules가 함께 존재할때 세로 중앙정렬을 하고 싶다는 것이었습니다.
보내주신 답변을 보니까, :rules 속성이 존재하지 않을때의 UI입니다.

:rule가 포함된 q-input의 세로 중앙 정렬을 하고 싶습니다.

인프런 커뮤니티 질문&답변

q-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상