list가 안보여요...
213
June0151
작성한 질문수 1
1
<App.vue>
<template>
<div id="app">
<TodoHeader></TodoHeader>
<Todoinput v-on:addTodoItem="addOneItem"></Todoinput>
<TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList>
<TodoFooter></TodoFooter>
</div>
</template>
<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoFooter from "./components/TodoFooter.vue";
import Todoinput from "./components/Todoinput.vue";
import TodoList from "./components/TodoList.vue";
export default {
data: function() {
return {
todoItems: []
};
},
methods: {
addOneItem: function() {
var obj = { completed: false, item: this.todoItem };
localStorage.setItem(this.todoItem, JSON.stringify(obj));
this.todoItems.push(obj);
},
removeOneItem: function(todoItem, index) {
localStorage.removeItem(todoItem.item);
this.todoItems.splice(index, 1);
}
},
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(
JSON.parse(localStorage.getItem(localStorage.key(i)))
);
}
// this.todoItems.push(
// JSON.parse(localStorage.getItem(localStorage.key(i)))
// );
}
}
},
components: {
TodoHeader: TodoHeader,
TodoFooter: TodoFooter,
TodoList: TodoList,
Todoinput: Todoinput
}
};
</script>
<style>
body {
text-align: center;
background-color: #f6f6f6;
}
input {
border-style: groove;
width: 200px;
}
button {
border-style: groove;
}
.shadow {
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03);
}
</style>
<TodoList.vue>
<template>
<div>
<ul>
<li v-for="(todoItem, index) in propsdata" v-bind:key="todoItem.item" class="shadow">
<button
class="checkBtn"
v-bind:class="{checkBtnCompleted: todoItem.completed}"
v-on:click="toggleComplete(todoItem)"
>V</button>
<span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span>
<!-- <span class="removeBtn" v-on:click="removeBtn(todoItem, index)">
<i class="fas fa-trash-alt"></i>
</span>-->
<button class="removeBtn" v-on:click="removeTodo(todoItem, index)">delete</button>
</li>
</ul>
</div>
</template>
<script scoped>
export default {
props: ["propsdata"],
methods: {
removeTodo: function(todoItem, index) {
this.$emit("removeItem", todoItem, index);
},
toggleComplete: function(todoItem) {
todoItem.completed = !todoItem.completed;
localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
}
}
};
</script>
<style>
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 {
text-decoration: line-through;
color: #b3adad;
}
.textCompleted {
text-decoration: line-through;
color: #b3adad;
}
</style>
dd
똑같이 따라했고, 다른 분 질문 내용도 확인하고 인덴트도 다 없앴는데도 계속 리스트가 안나오네요.... 삭제도 되고 추가도 되는데 리스트 내용만 안나와서 너무 답답해요...
에러가 안뜨니 어디가 어떻게 잘못된건지도 잘 모르겠습니다....
답변 1
Chrome 개발자 모드 확장이 안됨
0
254
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
144
1
router-view에 props를 어떻게 넘길 수 있나요?
1
279
2
Vue가 인식되지 않는 현상
0
205
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
253
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
367
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
344
2