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 앱을 성공적으로 만들었습니다.
행복한 코딩.
감사합니다.. 🦄 ❤️
Reference
이 문제에 관하여(Vue 3를 사용하는 Todo 앱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/snehalkadwe/todo-app-using-vue-3-433n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)