리스트의 이름이 뜨지 않습니다
232
tlsalstj01
投稿した質問数 2
1
- 밑에 있는 사진이 vue 개발자 도구 캡쳐이고 아래는 TodoList.vue 코드입니다 Json말고 getitem으로 했는데도 똑같이 보이지 않네요 연결을 끊고 다시 해봐도 변하지 않습니다
TodoList.vue
<template>
<div>
<ul>
<li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">
<i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>
<span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.Item }}</span>
<span class="removeBtn" v-on:click="removeTodo(todoItem, index)">
<i class="fas fa-trash-alt"></i>
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data: function() {
return {
todoItems: []
}
},
methods: {
removeTodo : function(todoItem,index) {
this.todoItems.splice(index, 1);
// console.log(todoItem, index);
localStorage.removeItem(todoItem);
},
toggleComplete: function(todoItem,index) {
todoItem.completed = !todoItem.completed;
//localstorage에 갱신하는 부분
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') {
// this.todoItems.push(localStorage.getItem(localStorage.key(i)));
this.todoItems.push(JSON.parse(localStorage.getItem(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: 10px;
}
.checkBtnCompleted {
color:black;
}
.textCompleted {
text-decoration: line-through;
/* color:#b3adad; */
}
</style>
TodoInput.vue > script
<script>
export default {
data: function() {
return {
newTodoItem: ''
}
},
methods: {
addTodo: function() {
if (this.newTodoItem !== '') {
var obj = {completed: false, item: this.newTodoItem};
localStorage.setItem(this.newTodoItem, JSON.stringify(obj));
this.clearInput();
}
},
clearInput: function() {
this.newTodoItem = '';
}
}
}
vue
javascript
vuejs
vuex
es6
回答 1
Chrome 개발자 모드 확장이 안됨
0
258
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
144
1
router-view에 props를 어떻게 넘길 수 있나요?
1
280
2
Vue가 인식되지 않는 현상
0
205
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
253
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
368
3
로컬 스토리지는 어디에 있나요?
1
279
1
vuex 실행시 새로고침해야지만 리스트에 나타나는 현상
1
387
2
export default 관련한 질문
0
354
2
깃허브 vue-todo 접근불가에 따른 확인요청
1
354
2
깃허브에 문제있는것 같습니다.
1
273
2
인프런 강의 재생 화면 구성 변경 문의드립니다
1
303
2
addTodo Helper 함수 적용
1
243
1
vuex 헬퍼 전역 설정
1
245
2
github 권한요청드립니다.
1
258
2
이벤트 위치에 대한 궁금증 입니다.
1
223
2
구조 차이에 대한 문의
1
345
2