[Vue.js] todoList 만들기1_2. 할일목록구현

 

 

[ 할 일 목록 저장 ]

 

      <input
        id="new-todo-title"
        class="new-todo"
        placeholder="할일을 추가해주세요"
        autofocus
        @keyup.enter="enterKeyFunction"
        v-model="todoInput"
      />

할 일을 입력하면 v-model에 정의된 'todoInput'으로 값이 매핑되어 저장됨

엔터키를 입력하여 할일이 리스트에 저장되는데 

엔터키 입력시 @keyup.enter로 'enterKeyFunction'이 호출됨.

 

 

enterKeyFunction()

  
  data(){
        return {
            todoInput :'',  
            dynamicLists:[],
            completedChecked:[],
            isShowTodoList:false,
            isCompleted:false,
            isCompletedArr:{},
            isHidden:{},
            isSelected:[true],
            totalCount:0,
        }
    },
  methods:{
        enterKeyFunction(){
            this.dynamicLists.push(this.todoInput);
            this.todoInput = '';
              this.isNotHiddenCnt();
        },
        ...
     }

 

<template>
<input id="new-todo-title"   
  ...
  @keyup.enter="enterKeyFunction"
 v-model="todoInput" />
 </template>
 <script>
 	export data(){
    	return {
        	todoInput:'',
            dynamicLists:[],
            ...
         }
    }
 </script>

v-model로 input에 할 일 입력시 data에 정의된 todoInput에 입력값이 저장됨.

 

 

<template>
<input id="new-todo-title"   
  ...
  @keyup.enter="enterKeyFunction"
 v-model="todoInput" />
 </template>
 <script>
 	export data(){
    	return {
        	todoInput:'',
            dynamicLists:[],
            ...
         }
    },
    methods:{
     enterKeyFunction(){
            this.dynamicLists.push(this.todoInput);
            this.todoInput = ''; //할일을 리스트에 추가후 입력창 초기화를 위함
            this.isNotHiddenCnt();
        },
    }
 </script>

 

엔터키 입력시 enterkeyFunction()이 호출되어 data에 정의된 dynamicLists배열에 todoInput을 추가시킴.

enterkeyFunction() 호출시 dynamicLists에 입력값 추가후 todoInput초기화 시켜줌

 

<template>
<input id="new-todo-title"   
  ...
  @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">
     <div class="view">
       <input class="toggle" type="checkbox"/>
       	<label class="label">{{list}}</label>
       <button class="destroy"></button>
     </div>
     <input class="edit" value="새로운 타이틀" />
   </li>
 </ul>
 </template>
 <script>
 	export data(){
    	return {
        	todoInput:'',
			dynamicLists:[],
            ...
         }
    },
    methods:{
     enterKeyFunction(){
            this.dynamicLists.push(this.todoInput);
            this.todoInput = ''; //할일을 리스트에 추가후 입력창 초기화를 위함
            this.isNotHiddenCnt();
        },
    }
 </script>

화면에 dynamicLists에 저장된 값들을 v-for로 리스트에 보여지도록 함

 

 

 

 

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

NEXTSTEP