-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
왜 저는 todoItem.item 하면 값이 안나오는걸까요?
23.06.12 12:29 작성 23.06.12 12:30 수정 조회수 170
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>
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>
답변을 작성해보세요.
0
답변 1