인프런 커뮤니티 질문&답변

1. TodoList.vue코드

<template>

<div>

<ul>

<!-- <li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">

{{todoItem}}

<i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>

v-bind:class="{A:a}" A클래스의 a속성이 false면 안나타남, true면 나타남 -->

<!-- <span v-bind:class="{textCompleted: todoItem.completed}">

{{ todoItem.item }}

</span>

<span class="removeBtn" v-on:click="removeTodo(todoItem, index)">

<i class="fa-solid fa-trash-can"></i>

</span>

</li>> -->

<li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem" class="shadow">

<i class="checkBtn fa-solid fa-check" v-bind:class="{ checkBtnCompleted: todoItem.completed }" v-on:click="toggleComplete(todoItem, index)"></i>

{{ todoItem.item }} {{ index }}

<!-- //v-bind:class="{A:a}" A클래스의 a속성이 false면 안나타남, true면 나타남 -->

<span v-bind:class="{ textCompleted: todoItem.completed }">

{{ todoItem}}

</span>

<span class="removeBtn" v-on:click="removeTodo">

<i class="fa-solid fa-trash-can"></i>

</span>

</li>

</ul>

</div>

</template>

<script>

export default {

data: function () {

return {

todoItems: []

}

},

methods: {

removeTodo: function (todoItem, index) {

console.log('remove items');

console.log(todoItem, index);

localStorage.removeItem(todoItem);

this.todoItems.splice(index, 1);

},

toggleComplete: function (todoItem, index) {

todoItem.completed = !todoItem.completed;

console.log(index);

console.log(todoItem.item);

//로컬스토리지 갱신

localStorage.removeItem(todoItem.item);

localStorage.setItem(todoItem.item, JSON.stringify(todoItem));

}

},

created: function () {

if (localStorage.length > 0) {

for (var i = 0; i < localStorage.length; i++) {

if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {

console.log(JSON.parse(localStorage.getItem(localStorage.key(i))));

this.todoItems.push(localStorage.key(i));

}

}

}

}

}

</script>

<style scoped>

ul {

list-style-type: none;

padding-left: 0px;

margin-top: 0;

text-align: left;

}

li {

display: flex;

min-height: 50px;

height: 50px;

line-height: 50px;

margin: 0.5rem 0;

padding: 0 0.9rem;

background: white;

border-radius: 5px;

}

.removeBtn {

margin-left: auto;

color: #de4343;

}

.checkBtn {

line-height: 45px;

color: #62acde;

margin-right: 5px;

}

.checkBtnCompleted {

color: #b3adad;

}

.textCompleted {

text-decoration: line-through;

color: #b3adad;

}

</style>

2. TodoInput.vue코드

   <template>

   <div class="inputBox shadow">

   <input type= "text" v-model="todoItems" v-on:keyup.enter="addTodo">

   <span class="addContainer" v-on:click="addTodo">

   <i class="fas fa-plus addBBtn"></i>

   </span>

   </div>

   </template>

   <script>

   export default {

   data: function(){

   return{

   todoItems: ""

   }

   },

   methods:{

   addTodo: function(){

   if(this.todoItems !== ''){ //저장하는 로직

   //localStorage.setItem(key, value);

   //localStorage.setItem(this.newTodoItem, this.newTodoItem);

   var obj = {completed: false, item: this.todoItems};

   //localStorage.setItem(this.newTodoItem,obj);

   localStorage.setItem(this.todoItems, JSON.stringify(obj)); //obj 객체 > string화

   this.clearInput();

   }

   },

   clearInput: function(){

   this.todoItems = '';

   }

   }

   }

   </script>

   <style scoped>

   input:focus{

   outline: none;

   }

   .inputBox {

   background: white;

   height: 50px;

   line-height: 50px;

   border-radius: 5px;

   }

   .inputBox input {

   border-style: none;

   font-size: 0.9rem;

   }

   .addContainer {

   float: right;

   background: linear-gradient(to right, #6478FB, #8763FB);

   display: block;

   width: 3rem;

   border-radius: 0 5px 5px 0;

   }

   .addBtn {

   color: white;

   vertical-align: middle;

   }

   </style>