[vue-select] 내용 정리

프로젝트를 진행하면서 vue-select를 많이 사용하였는데 

매번 쓸 때마다 공식문서 찾아가며 이리저리 검색하며 사용한 내용들을

정리하고자 글을 작성한다. 

 

우선 ,

나는 nuxt framework를 사용하였고 

vue select는 plugin directory안에 library.js를 만들어 공통 컴포넌트로 만들고 

그냥 호출해서 쓴다. 

 

(대부분의 외부 라이브러리는 해당 파일 안에 때려 박는다.)

 

library.js

import Vue from 'vue'
import vSelect from 'vue-select'

Vue.component('v-select', vSelect)

 

nuxt.config.js

...
    plugins: [
        {ssr: false, src: '@/plugins/mixins.js'},
        {ssr: false, src: '@/plugins/library.js'},
        {ssr: false, src: '@/plugins/filters.js'},
        ...
    ],
...

 

이렇게 써도 프로그램상 부담도 없고 어디서든 호출 가능하다 (v-select tag로)

 

기본 구조는 다음과 같다. 

    <v-select
        class="클래스명"
        v-model="모델명"
        :options="옵션 배열"
        :reduce="선택된 값의 모델 값(Object 인경우)"
        :clearable="X자 표시 여부"
        :searchable="검색여부"
    />

 

이 외에도 여러 가지 내용이 있지만 

위에 적혀있는 것만 모두 이해해도 사용하는데 아무 지장이 없다. 

 

추가로 알고 싶으면 공식문서를 참조하자 <https://vue-select.org/>

 

 

- class

우선 class부터 하나 씩 살펴보면

나는 layouts 디렉터리 안에 있는 defaults.vue 안에 main.scss를 import 시키고 

main.scss 안에 vue_select.scss를 import 시켜서 쓴다. 

 

vue_select.scss를 따로 만드는 이유는 다른 라이브러리도 커스텀한 css를 사용하는데 

이게 섞이기 시작하면 골치 아프기도 하고 

구분지어서 보기 편하기도 해서다. 

 

클래스 명에는 공통적으로 들어가는 vs를 참고해서 만들면 

기존 컴포넌트에서 불러도 defaults.vue를 기반으로 component를 호출하기 때문에 override 되기 쉽다. 

 

- model

모델은 그냥 data에 선언하거나 바로 쓰면 되니까 넘어감.

 

- options

옵션에는 배열이 들어가는데 처음에는 String 배열만 들어갈 수 있는 줄 알았는데 Obejct 배열이 들어가도 잡을 수 있다. 

label만 잘 선언해 주면.

 

ex)

let book = {
    name: "book",
    koreanName: "책"
}

let cup = {
    name: "cup",
    koreaName: "컵"
}

// 위 두가지 object를 가지고 있는 배열이 존재 할 때 
let list = [book, cup]
let selected = null

// label에 해당 object의 key 값을 적어주면 해당 키로 나오기도 하고 
<v-select
    v-model="selected"
    :options="list"
    label="koreaName"
/>

// 이런식으로 label에 표시하고 싶은 name을 넣어서 배열을 만들어서 options에 넣어 주어도 된다. 
let list2 = list.map(e => {
    e.label = e.koreaName
    return e
})

<v-select
    v-model="selected"
    :options="list2"
/>

 

- reduce

options가 Object List 인 경우 해당 object를 선택하였을 때 실제 모델에 데이터가 Object로 바인딩되는 경우도 있겠지만 그렇지 않은 경우가 더 많다. (uid, id, key index 등과 같은 특정 parameter 값과 값이 바인딩된다.)

그러한 경우 object list 배열의 unique key와 같이 유일한 key 혹은 데이터 값을 찾아서 넣을 수 있도록 만든 함수이다. 

 

ex)

// 아래와 같은 값이 있고 선택된 값에서 가격 정보만 사용되는 경우 
let coffeeList = [
    {
        id: 1,
        key: "Americano",
        price: 2500,
        name: "아메리카노"
    },
    {
        id: 2,
        key: "Latte",
        price: 3000,
        name: "카페라떼"    
    }
]

let coffee = null
let price = null

// 이렇게 model에 가격 정보를 넣어서 사용하면 price에는 선택된 Object의 가격 정보만 들어가게 된다. 
<v-select
    v-model="price"
    label="name"
    :options="coffeeList"
    :reduce="e => e.price"
/>

 

- clearable

선택된 이후 해당 selectbox에 null을 넣을 수 있냐 없냐의 선택이다. 

대부분의 필수 항목들은 clearable을 false로 넣는다. 

함수로 만들어서 조건부 서식으로 사용도 가능하다. 

 

-searchable

v-select문은 기본적으로 검색 기능이 붙어 있고 default 값이 true라서 마우스를 가져다 가면 input box의 모양으로 나타나게 된다. 

검색을 사용하지 않거나 선택형 select box만 사용한다면 명시적으로 searchable=false를 주어야 한다. 

 

 

 

끝.