Vue 3를 사용하는 Todo 앱

안녕하세요 독자 여러분,

오늘 블로그에서는 Vue 3 컴포지션 API를 사용하여 간단한 할 일 앱을 만들고 있습니다.

컴포지션 API가 무엇인지 잘 모르신다면 제 이전 블로그를 참조하세요. 기본 지식을 얻을 수 있도록 여기에서 링크를 공유해 드리겠습니다.

할 일을 localStorage에 저장하고 제거한 다음 localStorage에서 제거할 수도 있습니다.
components/Todo/Todos.vue 내에 컴포넌트를 생성하고 아래 코드를 추가합니다.

<template>
  <div class="mt-10">
    <div class="flex flex-row justify-items-center justify-between my-10 mx-auto w-1/2">
      <h1 class="font-bold text-indigo-600 flex text-xl">Todo Application</h1>
      <button
        type="button"
        class="border w-75 rounded-lg font-bold bg-pink-600 text-white py-2 px-4"
        @click="enableTodo"
      >Add Todo</button>
    </div>
    <!-- add todo block -->
    <div v-show="showAddTodo">
      <div class="shadow mx-auto mt-6 p-7 w-1/2">
        <h3>Add Todo</h3>
        <form class="w-full max-auto mt-5">
          <div class="md:flex md:items-center mb-6">
            <div class="md:w-1/3">
              <label
                class="text-gray-500 font-bold text-right mb-1 md:mb-0 pr-4"
                for="inline-full-name"
              >Todo</label>
            </div>
            <div class="md:w-2/3">
              <input
                v-model="todo"
                class="appearance-none border border-indigo-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline focus:bg-white focus:border-indigo-800"
                id="inline-todo"
                type="text"
              />
            </div>
          </div>
          <button type="button" class="w-1/4 rounded bg-indigo-500 text-white shadow-sm py-2 mx-auto" @click="addTodo()">Add</button>
          <button type="button" class="ml-4 w-1/4 rounded bg-red-500 text-white shadow-sm py-2 mx-auto" @click="close()">Close</button>
        </form>
      </div>
    </div>
    <!-- list of todos block -->
    <div
      v-for="(todo, index) in todos"
      :key="index"
      class="w-1/2 flex justify-between bg-indigo-100 text-indigo-700 mx-auto border my-2 p-3 rounded"
    >
    <p @dblclick="markAsComplete(todo)" :class="{'completed': todo.completed}" class="text-lg"> {{ todo.todo }} </p>

    <span><button @click="removeTodo(index)" class="text-pink-700 font-bold text-lg">x</button></span>
    </div> 
  </div>
</template>

<script>
// import getTodosData from '@/composables/displayTodos';
import { ref } from "vue";

export default {
  setup() {
    const showAddTodo = ref(false);
    const todo = ref("");
    const completed = ref(false);

    // default todo array
    const defaultTodoData = [
      {
        completed: false,
        todo: "Todo 1",
      },
      {
        completed: true,
        todo: "Todo 2",
      },
    ];

    // get todo from localstroage if set else get the default one
    const todosLists = JSON.parse(localStorage.getItem("todos")) || defaultTodoData;
    const todos = ref(todosLists);

    // add todo
    function addTodo() {
      if (todo.value) {
        todos.value.push({
          completed: false,
          todo: todo.value,
        });
        todo.value = "";
      }
      saveTodo();
    }

    // enable add todo modal
    const enableTodo = () => {
      showAddTodo.value = !showAddTodo.value;
    }

    const close = () => {
      showAddTodo.value = !showAddTodo.value;
    }

    // remove todo
    function removeTodo(index) {
      todos.value.splice(index, 1)
      saveTodo();
    }

    // mark as complete
    function markAsComplete (todo) {
      todo.completed = !todo.completed;
      completed.value = true;
      saveTodo();
    }

    // save todo in localStorage
    function saveTodo () {
      localStorage.setItem("todos", JSON.stringify(todos.value));
    }

    return { todos, showAddTodo, enableTodo, addTodo, markAsComplete, saveTodo, todo, removeTodo, completed,close };
  },
};
</script>

<style>
  .completed {
     text-decoration: line-through;
  }
</style>

Todo 앱을 성공적으로 만들었습니다.

행복한 코딩.
감사합니다.. 🦄 ❤️