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 )
<!-- 모두 선택 버튼 -->
<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가 너무 어렵다😥
'웹 프로그래밍' 카테고리의 다른 글
다중 정렬 ( 드래그 앤 드랍 ) (0) | 2020.03.06 |
---|---|
개발자 도구 및 우클릭 막기 (0) | 2019.12.30 |
[ JS / jQuery ] 화나서 직접 만든 원페이지 스크롤 (23) | 2019.08.01 |
이미지냐 텍스트냐 SEO작업 (2) | 2019.07.12 |
[ SQL문 ] 가장 최신 데이터 가져오기, JOIN 참고 사진 (0) | 2019.05.22 |