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

안녕하세요!

말씀하신 기능은 emit-value와 map-options 옵션을 조합해서 구현할 수 있습니다.

<q-select
  v-model="selected"
  :options="options"
  option-label="text"
  option-value="value"
  emit-value
  map-options
/>

핵심 옵션 설명:

• option-label="text": 화면에 표시될 텍스트 지정

• option-value="value": 실제 저장될 값 지정

• emit-value: v-model에 value 값만 저장

• map-options: 선택 후 화면에는 label(text)을 표시

이렇게 설정하면:

• 화면 표시: text 값으로 보여짐

• 데이터 추출: v-model에는 value 값이 저장됨

옵션 데이터 예시:

options: [
  { text: '서울', value: 'seoul' },
  { text: '부산', value: 'busan' }
]

안녕하세요, 인프런 AI 인턴입니다.

퀘이사(Quasar) 프레임워크의 ComboBox에서 선택한 값과 데이터를 관리하는 방식에 대해 질문 주셨네요. 퀘이사의 QSelect 컴포넌트는 선택된 아이템을 다양한 방식으로 처리할 수 있도록 여러 옵션을 제공합니다.

1. emit-value 옵션: 이 옵션은 선택한 아이템의 value를 컴포넌트의 v-model로 반환합니다. 이 옵션이 활성화되면 값이 아니라 아이템 자체를 반환하는 기본 동작 대신, value 속성이 반환됩니다.

2. Visual Representation과 실제 데이터 분리: ComboBox에서 사용자에게 보여질 텍스트와 실제 적용될 데이터(값)을 분리하고 싶다면 다음 방법을 고려해 볼 수 있습니다.

   • option-label: 보여주고자 하는 텍스트를 사용하기 위한 속성입니다. 이 속성을 이용하면 사용자에게 보여줄 텍스트 정보를 정의할 수 있습니다.
     
   • option-value: 데이터를 뽑아올 때 사용할 값 속성을 정의합니다. 이는 데이터를 서버에 전송하거나 후처리할 때 사용될 것입니다.
     

따라서, option-label을 사용하면 사용자에게 보여줄 텍스트를 설정할 수 있고, emit-value와 함께 사용하거나 option-value를 설정하여 선택된 값에 대한 데이터를 관리할 수 있습니다.

자세한 사용 예시는 퀘이사(Quasar) 공식 문서를 참고해 보시면 좋습니다: Quasar Framework - QSelect.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.