[2023-05-15] Quasar QSelect 옵션 설명

 안녕하세요. 클스 입니다.

Quasar QSelect 옵션에 대한 설명을 하고자 합니다.

회사를 선택하거나, 여러 코드값을 선택할때 아래와 같은 화면이 필요합니다. 그리고 company_id 값으로

미리 선택되도록 해야 합니다. q-select 의 option 은 label, value 2개 속성이 기본 입니다. 

물론 option-value = 'yyy' , option-label = "xxx" 이렇게 해서 커스텀 가능합니다.

company_options: [

{

label: 'Google',

value: 'Google-value',

description: 'Search engine',

category: '1',

},

 

소스를 보면 아래와 같이 사용하면 됩니다. 그런데 map-options, emit-value 2개 옵션을 잘 사용해야 원하는 값을 얻게 됩니다.

<q-select

filled

v-model="company_model"

:options="company_options"

label="Standard"

map-options

emit-value />

map-options 은 value 값으로 선택을 할 수 있게 하는 옵션입니다.

emit-value 은 선택된 option의 value 값만 넘겨 줍니다.

앞에서 option을 object로 선언했기 때문에 map-option이 없으면 value 값이 화면에 표시됩니다.

아래 화면에서 보면 Apple-Value를 표시됩니다. 원하는건 Apple이 표시되길 원합니다.

이때 map-options 을 사용하면 value 값으로 매칭해서 Label을 출력해줍니다.

그리고 Object로 선언된 option이므로 선택하면 Object 가 값으로 넘어옵니다. company_id만 필요한데 불필요하게 Object 값이 넘어오니 company_model.value 이렇게 사용해야 됩니다.

바로 value를 string으로 받기 위해서 emit-value 사용하면 됩니다.

emit-value 를 사용하지 않으면 아래와 같이 값이 넘어옵니다.

최종적으로 우리가 원하는 화면을 위해서는 아래와 같이 전체 소스를 확인할 수 있습니다.

<!-- MainLayout.vue -->

<template>

<div class="q-pa-md" style="max-width: 300px">

<div class="q-gutter-md">

<q-badge color="secondary" multi-line> Model: "{{ company_model }}" </q-badge>

<p>Selected Value: {{ company_model }}</p>

<q-select filled v-model="company_model" :options="company_options" label="Standard" emit-value map-options />

</div>

</div>

</template>

<script>

import { ref } from 'vue';

export default {

setup() {

return {

company_model: ref(null),

company_options: [

{

label: 'Google',

value: 'Google-value',

description: 'Search engine',

category: '1',

},

{

label: 'Facebook',

value: 'Facebook-value',

description: 'Social media',

category: '1',

},

{

label: 'Twitter',

value: 'Twitter-value',

description: 'Quick updates',

category: '2',

},

{

label: 'Apple',

value: 'Apple-value',

description: 'iStuff',

category: '2',

},

{

label: 'Oracle',

value: 'Oracle-value',

disable: true,

description: 'Databases',

category: '3',

},

],

};

},

mounted() {

this.company_model = 'Apple-value';

},

};

</script>