[Vue.js] todoList 만들기1_1. 프로젝트개요

 

 

 

 

 

 

 

 

프로젝트 구현 기능

* css는 기존 블랙커피스터디9기를 참여하면서 긁어온 UI입니다.

- 할일 입력시 리스트 추가됨

- 리스트에 추가 된 할 일을 체크시 할일 완료기능 구현

- 리스트에 추가 된 할 일 삭제 기능

- 리스트 추가된 항 목 '전체할일' , '해야할일',  '완료한 할일' 필터기능

- 현재 노출된 리스트 개수 확인을 위한 카운팅 하여 노출

 

<template>
   <div class="todoapp">
      <h1>TODOS</h1>
      <input
        id="new-todo-title"
        class="new-todo"
        placeholder="할일을 추가해주세요"
        autofocus
        @keyup.enter="enterKeyFunction"
        v-model="todoInput"
      />
      <ul id="todo-list" class="todo-list" v-if="showTodoList"> 
          <li v-for="(list, index) in dynamicLists" :key="index" v-bind:class="{completed : isCompletedArr[index] === true, hidden : isHidden[index]}">
            <div class="view">
            <input class="toggle" type="checkbox" @change="toggleCompleted(index)" v-model="isCompletedArr[index]"  value="index"/>
            <label class="label">{{list}}</label>
            <button class="destroy" @click="toggleDestroyed(index)"></button>
            </div>
            <input class="edit" value="새로운 타이틀" />
        </li>
      </ul>
      <main>
        <input class="toggle-all" type="checkbox" v-model="completedChecked"/>
        <ul id="todo-list" class="todo-list"></ul>
        <div class="count-container">
          <span class="todo-count">총 <strong id="todoItemTotCnt">{{totalCount}}</strong> 개</span>
          <ul class="filters" id="filtersGroup">
            <li>
              <a v-bind:class="{all, filterBtn, selected:isSelected[0]}" href="#" id="allBtn" @click="toggleFiltered('all')">전체보기</a>
            </li>
            <li>
              <a v-bind:class="{active, filterBtn, selected:isSelected[1]}" href="#active" @click="toggleFiltered('active')">해야할 일</a>
            </li>
            <li>
              <a v-bind:class="{completed, filterBtn, selected:isSelected[2]}" href="#completed" @click="toggleFiltered('completed')">완료한 일</a>
            </li>
          </ul>
        </div>
      </main>
    </div>
</template>

 

 

<script>

export default {
    data(){
        return {
            todoInput :'',
            completedChecked:[],
            dynamicLists:[],
            isShowTodoList:false,
            isCompleted:false,
            isCompletedArr:{},
            isHidden:{},
            isSelected:[true],
            totalCount:0,
        }
    },
    computed:{

    },
    methods:{
        enterKeyFunction(){
            this.dynamicLists.push(this.todoInput);
            this.todoListText = this.todoInput;
            this.todoInput = '';
              this.isNotHiddenCnt();
        },
        showTodoList(){
            if(this.dynamicLists.length > 0){
                this.isShowTodoList = true;
            }else{
                this.isShowTodoList = false;
            }
            return this.isShowTodoList;
        },
        toggleCompleted(idx){
            console.log(idx);
            console.log(this.isCompletedArr);
             if(this.isCompletedArr[idx]){
                 this.isCompleted = true;
             }else{
                 this.isCompleted = false;
             }
        },
        toggleDestroyed(idx){
            this.isCompletedArr[idx] = {};
            this.dynamicLists.splice(idx,1);
            this.isNotHiddenCnt();
        },
        toggleFiltered(status){
            for(let i=0; i<this.dynamicLists.length; i++){
                this.isHidden[i]=false;
                this.isSelected.splice(0,0,true);
                this.isSelected.splice(1,0,false);
                this.isSelected.splice(2,0,false);
                 if(status === 'active'){
                    this.isSelected.splice(0,0,false);
                    this.isSelected.splice(1,0,true);
                    this.isSelected.splice(2,0,false);
                     if(this.isCompletedArr[i]){
                        this.isHidden[i]=true
                    }
                 }
                 else if(status === 'completed'){
                    this.isSelected.splice(0,0,false);
                    this.isSelected.splice(1,0,false);
                    this.isSelected.splice(2,0,true);
                     if(!this.isCompletedArr[i]){
                        this.isHidden[i]=true
                    }
                 }
                }

            if(status === 'active'){
                for(let i=0; i<this.dynamicLists.length; i++){
                    if(this.isCompletedArr[i]){
                        this.isHidden[i]=true
                    }
                }
            } else if(status === 'completed'){
                 for(let i=0; i<this.dynamicLists.length; i++){
                    if(this.isCompletedArr[i]){
                        this.isHidden[i]=false
                    }
                }
            }
            this.isNotHiddenCnt();
        },
         isNotHiddenCnt(){
            let hiddenCnt = 0 ;
            const isHiddenLength = Object.keys(this.isHidden).length;
            const todoListLength = Object.keys(this.dynamicLists).length;
            for(let i=0; i<isHiddenLength; i++){
                if(this.isHidden[i]){
                    hiddenCnt++;
                }
            }
            this.totalCount = todoListLength - hiddenCnt;
            return this.totalCount;
        }
    }
}
</script>

 

 

 

 

 

 

* 전체적인 프로젝트 진행방향은 블랙커피스터디9기를 참여하여 미션내용과 동일하게 진행하되 Vue.js로 구현하였습니다.

NEXTSTEP