Vue - 미니프로젝트 Todo App 2

1에이어서 시작.

1에서 만든 todo-app에 체크를 하면, text에 줄이 그어지게 만들기

 

1. checkbox에 체크를 하면, App.vue에있는 checked : false가 true로 바뀌어야한다.

체크할때마다 바뀌니까 onchane로 toggle

//Todo.vue
<template>
  <div>
    <input type="checkbox" :checked="todo.checked"
           @change="togglechx">
    <span class="m-3">{{todo.text}}</span>
  </div>
</template>

 

2. toggle 메소드에서 값을 부모한테 보내야하기때문에 $emit사용

$emit('원하는이름', { 보낼값})

checked값은 e.target.checked로 가져올수있다

//Todo.vue

  methods :{
    togglechx(e){
       this.$emit('toggle-checkbox',{
         id: this.todo.id,
         checked : e.target.checked
       })
    }
  }

3.부모(App.vue)에서 받기

toggle-checkbox로 보냈으니 toggle-checkbox로 받고, 매소드 이름짓기

//App.vue
  <Todo v-for="todo in todos"
          :key="todo.id"
          :todo="todo"
          @toggle-checkbox="toggleCheckBox"/>

 

지은 이름 toggleCheckBox으로 메소드만들기

보낸 props를 구조분해해서 바로 쓸수있다.

//App.vue
 methods: {
    todoText : "",
    addToDo(e) {
      this.todos.push({
        id: Math.random(),
        text: e.target.value,
        checked: false
      });
      this.todoText ='';
    },
    toggleCheckBox({id,checked}){
      console.log(id,checked)
    }
  }

체크박스를 누르면 true출력, 다시 체크를 해제하면 false가 출력된다.

---

예외 - 구조분해

const p = { kossie : 1, coder : 2 }; 라는 객체가 있을때,

1을 얻기위해 p.kossie를 사용해야한다.

하지만 이렇게 구조분해하면

const { kossie } =p;

kossie로 바로 사용가능

---

toggleCheckBox 메소드를 수정할건데,

todos를 각각 돌면서, todo.id가 id와 같으면 그 객체의 인덱스 번호를 찾는다.

일치하다면, 그 객체에 접근해서 checked를, 지금받은 checked로 바꿔준다.

   toggleCheckBox({id,checked}){
      const index = this.todos.findIndex(
          todo => {
            return todo.id === id;
          });
           this.todos[index].checked = checked;
    }

 

 

+ checked가 되면, 스타일을 바꿔주자.

//Todo.vue

    <span
        class="m-3"
        :class="todo.checked ? 'text-muted' : ''"
        :style="todo.checked ? 'text-decoration:line-through': ''">
      {{ todo.text }}
    </span>

+ 삭제버튼 만들기

버튼을 하나만들고, clickDelete메소드 연결

 

//Todo.vue
    <button class="btn btn-danger btn-sm"
     @click="clickDelete" >Delete</button>
     
     
     //생략
     
     
     <script>
     methods :{
      clickDelete(){
      this.$emit('click-delete',this.todo.id)
    }
    }
     </script>

App.vue의 Todo에서 받고, 메소드 만들기

App.vue
  <Todo v-for="todo in todos"
          :key="todo.id"
          :todo="todo"
          @toggle-checkbox="toggleCheckBox"
          @click-delete="deleteTodo"
    />
    
    //생략 
    
        deleteTodo(id){
      const index = this.todos.findIndex(
          todo => {
            return todo.id === id;
          });
      this.todos.splice(index, 1);
    }