multi-select 사용시 v-model 사용상 주의점

라이브러리마다 v-model을 사용할 때 조심해야겠다. 

 

<model-list-select
    v-model="item.serviceId"
    class="form-control"
    :placeholder="$t(`${translationPrefix}.placeholder.service`)"
    :list="serviceList"
    option-value="id"
    option-text="name"
    @input="(data) => { changeService(data) }"
/>

...

changeService (id) {
    this.item.serviceId = id;
    this.item.serviceName = this.serviceList
        .filter(opt => id.includes(opt.id))
        .map(opt => opt.name)
        .join(', ');

    this.getFacilityList();
    this.getRadiologistList();
},

 

 

같은 modal component 에서 좀 헷갈렸던 부분이 있는데 기존에 사용하던 라이브러리들은 multiple을 사용하지 않아서

 

단일 id로 v-model을 설정해줬었는데 multi-select는 계속 에러가 났다.

 

이유는 multi-select는 객체배열을 리턴하기때문에 기존방식처럼 내가 v-model에 id를 넣으면 안되는 것이었다. 

 

그래서 객체배열을 저장할 수 있는 새로운 데이터를 생성한 후 에러가 수정됐다. 

 

<multi-select
    v-model="item.facility"
    class="multi-select"
    :options="facilityList"
    label="name"
    track-by="id"
    multiple
    @input="changeFacility"
/>

...

changeFacility (obj) {
    this.item.facility = obj;
    this.item.facilityId = obj.map(item => item.id);
    this.item.facilityName = obj.map(item => item.name);
},