vue.js - v-model 배열(array)로 데이터 바인딩 하기

서론

이번 프로젝트 하면서 가장 짜증났던 요건이 있다.

 

1. select box 데이터를 다중 선택해야 하는 상황일때 multi select box가 아닌 select box를 다중으로 노출.

ex) 3가지의 select 데이터 중 2개를 선택해야 한다면 2개의 select box를 생성하고 각각 1개씩 선택

2. 첫번째 select box에서 데이터를 선택했다면 두번째 select box는 선택 불가.

 

라는 vue.js 하면서 만났던 방식 중 가장 짜증나는 방식이었다.

 

개발

1. select box 데이터를 다중 선택해야 하는 상황일때 multi select box가 아닌 select box를 다중으로 노출.

> 다중 선택해야 하는 개수만큼 select box를 v-for 처리. option 영역은 select 데이터로 v-for 처리.

 

2. 첫번째 select box에서 데이터를 선택했다면 두번째 select box는 선택 불가.

> disabled 를 이용하여 isVisible 메소드를 호출하여 처리.

 

소스

HTML

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
        select data 테스트
      </h1>
    </div>
    <select v-for="n in selectCnt" :key="n" v-model="selectExcludes[n-1]" class="select">
      <option value="undefined">
        선택 안함
      </option>
      <option v-for="(item, index) in selectList" :key="index" :disabled="isVisible(item.id)" :value="item.id">
        {{ item.name }}
      </option>
    </select>
    <br><br>
    <input type="button" value="현재 데이터 확인" @click="dataCheck">
    <br><br>
    <input type="button" value="첫번째 select data 111" @click="setFirstData">
  </div>
</template>

1. 다중 선택해야 하는 selectCnt 수 만큼 select box를 for문 생성
2. 선택 가능한 selectList 만큼 option을 for문으로 노출
3. v-model을 이용하여 selectExcludes 의 array에 데이터 바인딩
4. disabled를 이용하여 이미 선택한 데이터는 선택 불가 처리

SCRIPT

export default {
  data () {
    return {
      selectCnt: 2,
      selectList: [
        {
          id: '111',
          name: 'name111'
        },
        {
          id: '222',
          name: 'name222'
        },
        {
          id: '333',
          name: 'name333'
        }
      ],
      selectExcludes: []
    }
  },
  methods: {
    isVisible (data) {
      let returnFlag = false
      for (const i in this.selectExcludes) {
        if (this.selectExcludes[i] === data) {
          returnFlag = true
        }
      }
      return returnFlag
    },
    dataCheck () {
      console.log(this.selectExcludes)
    },
    setFirstData () {
      this.$set(this.selectExcludes, 0, '111')
    }
  }
}

1. data에 선택한 데이터를 담을 selectExcludes을 배열로 선언
2. isVisible 메소드를 이용하여 현재 데이터가 담겨있는 selectExcludes 배열에 option 데이터가 존재한다면 true, 존재 하지 않는다면 false를 return

* 실제 개발에서는 axios로 가져올 데이터지만 테스트를 위해 selectCnt, selectList는 data에 선언

 

테스트

select box에서 선택한 데이터는 선택 불가 처리.

v-model로 데이터 바인딩 확인을 위한 console.log 확인

this.$set 를 이용하여 외부에서 데이터 바인딩 처리 확인

 

결론

v-model을 기본적으로 string으로 넣고 value도 string으로 해서 데이터 바인딩을 하였는데 배열로 처리할수 있다는것을 확인한 공부였다.