[Vue.js 기초] 반복문 v-for 예제로 마스터하기(key, index 등)

Vue.js에서 사용하는 반복문에 대해 알아봅니다.  배열이든, 객체이든 반복해서 출력해야 할 경우 v-for 디렉티브를 사용하게됩니다. 샘플코드를 보고 따라하는 방법이 가장 빠르게 배우는 지름길입니다. 눈으로 본 자료는 기억에 오래가지 않아요. 

v-for 기본 예제& index 사용 예제

[HTML]

<div id="app">
  <h2>Todos: v-for 기본 예제</h2>
  <ul>
    <li v-for="item in city">도시: {{item}}</li>    
  </ul>
  <br/>
  <h2>Todos: v-for index 사용 예제</h2>
  <ul>
    <li v-for="(item, i) in city">Seq: {{i}}  ,  도시: {{item}}</li>    
  </ul>  
</div>

[JS]

new Vue({
  el: "#app",
  data: {
    city: ['서울','대전','대구','부산'],    
  },
  methods: {
  }
})

[CSS]

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

div {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

[실행결과]

v-for 객체 값을 갖는 배열 데이터 출력하기

vue.js 관련 책이나 공식 문서를 보면 key값을 선언해줄 것을 권장하고 있어요. 별도의 키 값이 없다면, index 값을 키값으로 활용해도 됩니다. 데이터베이스에서 데이터를 가져오는 경우라면 key 값이 있을 확률이 높아요. 아래쪽에 select 박스 예제를 보시면 이해가 오실거에요.

[HTML]

<div id="app">
  <h2>Todos: v-for 객체 값을 갖는 배열 데이터 출력하기</h2>
  <ul>
    <li v-for="item in cityList">시도:{{item.sido}}, 도시: {{item.city}}</li>    
  </ul>
  <br/>
  <h2>Todos: v-for 키값이 없다면 index를 키값으로 사용</h2>
  <ul>
    <li v-for="(item, i) in cityList">Seq: {{i}}  ,  도시: {{item.city}}</li>    
  </ul>  
</div>

[JS]

new Vue({
  el: "#app",
  data: {
    cityList: [{sido:"전북", city:"전주"},
    {sido:"전북",city:"익산"},
    {sido:"전북",city:"정읍"},
    {sido:"경기도",city:"일산"}],
  },
  methods: {
  }
})

[실행결과]

v-for를 사용하여 콤보박스(select태그)의 option 값 설정하기

[HTML]

<div id="app">
  <h2>Todos: v-for 콤보박스 option 출력</h2>
    <select v-model="selectModel">
      <option v-for="(item, idx) in cityList" :value="item.val" :key ="item.idx">
        {{item.city}}
      </option>
    </select>
  <span>콤보박스 선택값은? {{selectModel}}</span>
</div>

[JS]

new Vue({
  el: "#app",
  data: {
  	selectModel: '',
    cityList: [{city:"전북", val:"063"},
    {city:"경기",val:"032"},
    {city:"강원도",val:"033"},
    {city:"서울",val:"02"}],
  },
  methods: {

  }
})

[실행결과]

콤보박스 disabled 처리

콤보박스(select태그)의 값을 선택하면 그 다음엔 그 값을 선택하지 못하도록 해보자

[HTML]

<div id="app">
  <h2>Todos: v-for 콤보박스 disabled 처리</h2>
    <select v-model="selectModel[0]">
    <option value="undefined" selected>-선택-</option>   
      <option v-for="(item, idx) in cityList" :value="item.val" :key ="idx" :disabled="isVisible(item.val)">
        {{item.city}}
      </option>
    </select>
  <span>콤보박스 선택값은? {{selectModel}}</span>
  <br/><br/><br/>
  <input type="button" value="값 지정하기" @click="fnSetData">
</div>

[JS]

new Vue({
  el: "#app",
  data: {
  	selectModel: [],
    cityList: [{city:"전북", val:"063"},
    {city:"경기",val:"032"},
    {city:"강원도",val:"033"},
    {city:"서울",val:"02"}],
  },
  methods: {
    isVisible: function(item){
    	let rtn = false
      for(let i in this.selectModel){
      	if(this.selectModel[i] === item){
        	rtn = true
        }
      }
      return rtn;
    },
    fnSetData: function(){
    	this.$set(this.selectModel,0, '033')
    }
  }
})

Vue.set(object, propertyName, value)메소드를 사용하여 객체의 값을 변경할 수 있습니다.

[실행결과]

콤보박스(select태그)의 값을 선택하면 그 다음엔 그 값을 선택하지 못하도록 해보자

[HTML]

<div id="app">
  <h2>Todos: v-for Object 객체 출력</h2>
  <div v-for="(value, name, idx) in cityList">{{idx}}. {{name}}</div>  
  <br/><br/>
  <div v-for="(text, name, idx) in cityList">{{idx}}. {{name}} => {{text}}</div> 
</div>

[JS]

new Vue({
  el: "#app",
  data: {
  	selectModel: [],
    cityList: {
    	sido:"전북",
      city:"군산",
      dong:"나운동"
    	},
  },
  methods: {

  }
})

[실행결과]

v-for range(범위) 예제 

[HTML]

<div id="app">
  <h2>Todos: v-for Range 예제</h2>
  <span v-for="n in 10" :key="n">{{ n }} </span>
</div>

[REFERENCE]

• https://kr.vuejs.org/v2/guide/index.html?#%EC%A1%B0%EA%B1%B4%EB%AC%B8%EA%B3%BC-%EB%B0%98%EB%B3%B5%EB%AC%B8 
• https://kr.vuejs.org/v2/guide/list.html#Maintaining-State