[Vue.js] 모두 선택 및 해제

window.onload = function(){
	var app = new Vue({

		el : "#wrap",
		data : {
			"history" : [],
			"work_idxs" : [],
		},	
		
		computed : {
			
			checkAll : { 
				//getter
				get: function(){
					if((this.work_idxs.length != this.history.length) || this.history.length == 0)
						return false;
					else
						return true;							
				},
				//setter
				set: function(e){
					
					if(e){
						
						for(var i=0; i<this.history.length; i++){
						
							this.work_idxs.push(this.history[i].work_idx);
						}	
					}
					else{
						
						this.work_idxs = [];
					}
								
				}
			}
		},
	});	
}

 

 

computed 계산된이란 뜻을 가지며 간단한 표현식을 정의할때 사용되는것 같다.

(참고 : https://kr.vuejs.org/v2/guide/computed.html )

computed와 watch — Vue.js

<!-- 모두 선택 버튼 -->
<input type="checkbox" v-model="checkAll"> 

<!-- 선택 버튼 -->
<input type="checkbox" v-model="work_idxs"> 
<input type="checkbox" v-model="work_idxs"> 
<input type="checkbox" v-model="work_idxs"> 

history는 리스트를 가지고 있는 배열이다. ( ajax로 history를 받아오는 부분인데 따로 이부분은 위에 표시 하지 않았다. )

 

코드를 보면 밑에 있는 선택 버튼을 누르게 되면 work_idxs에 값이 들어가며 체크 표시가 되고,

모두 선택 버튼을 누를시 체크박스가 표시되어 있지 않다면 (클릭시 e=true), 받아온 리스트를 모두 체크한다.

만약 체크 표시를 풀경우 work_idxs를 비우게 되며 모두 해제가 된다.

 

아직 익숙하지 않은 vue.js가 너무 어렵다😥