[Vue.js] Todo App 만들기

• 구조 분해 할당
  • 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
  • 구조 분해 연산자, 전개 연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한 번에 처리할 수 있도록 해줌

 

• 화살표함수
  • 무명 함수를 생성하는 방법 중 하나
  • 기본 형태 : (parameter1, parameter2, ... )  =>  {함수 내용}
• findIndex()
  • 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스 반환
  • 만족하는 요소가 없으면 -1 반환
  • arr.findIndex(callback)
  • callback(element, index, array) : 콜백함수가 받는 인자는 findindex 메서드를 호출한 배열에서 받아옴

 

• 코드 구현 (App.vue)
  

<template>
  <div id="app" class="container">
    <h1 class="text-center">Todo App</h1>
    <input
      v-model="todoText"
      type="text"
      class="w-100 p-2"
      placeholder="Type todo"
      @keyup.enter="addTodo"
    />
    <hr />
    <Todo
      v-for="todo in todos"
      :key="todo.id"
      :todo="todo"
      @toggle-checkbox="toggleCheckbox"
      @click-delete="deleteTodo"
    />
    {{ todos }}
  </div>
</template>

<script>
import Todo from "@/components/Todo.vue";

export default {
  components: {
    Todo
  },

  data() {
    return {
      todoText: "",
      todos: [
        { id: 1, text: "buy a car", checked: false },
        { id: 2, text: "play game", checked: false }
      ]
    };
  },

  methods: {
    deleteTodo(id) {
      // const index = this.todos.findIndex(todo => {
      //   return todo.id == id;
      // });
      // this.todos.splice(index, 1);
      this.todos = this.todos.filter(todo => todo.id !== id);
    },
    addTodo(e) {
      this.todos.push({
        id: Math.random(),
        text: e.target.value,
        checked: false
      });
      this.todoText = "";
    },

    toggleCheckbox({ id, checked }) {
      //구조 분해 할당, id랑 checked 바로 접근 가능
      const index = this.todos.findIndex(todo => {
        return todo.id == id;
      });
      this.todos[index].checked = checked;
    }
  }
};
</script>

 

• Todo.vue

<template>
  <div class="mb-2 d-flex">
      <div>
        <input type="checkbox" :checked="todo.checked" 
        @change="toggleCheckbox">
      </div>

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

    <button
        class="btn btn-danger btn-sm"
        @click = "clickDelete">
        Delete
    </button>
  </div>
</template>
<script>
export default {
  props: {
    todo: {
      type: Object,
      requried: true
    }
  },
  methods: {
    toggleCheckbox(e) {
      this.$emit("toggle-checkbox", {
        id: this.todo.id,
        checked: e.target.checked
      });
    },

    clickDelete(){
        this.$emit('click-delete', this.todo.id)
    }
  }
};
</script>

 

• 실행 화면