list
490
univue
작성한 질문수 15
1
list이 나타나질 않아요ㅠ
에러는 없는데...
답변 8
5
<li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">
이 부분에 in todoItems를 in propsdata로 바꾸시면 될거에요! 제가 그랬거든요,,,
1
<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 TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'
//var my_cmp = {
// template: '<div>my component</div>'
//};
//new Vue({
// el: '',
// components: {
// 'my-cmp': my_cmp
// }
//})
export default {
data: function() {
return {
todoItems: []
}
},
methods: {
addOneItem: function(todoItem) {
var obj = {completed: false, item: todoItem};
localStorage.setItem(todoItem, JSON.stringify(obj));
this.todoItems.push(obj);
},
removeOneItem: function(todoItem, index) {
localStorage.removeItem(todoItem);
this.todoItems.splice(index, 1);
}
},
created: function() {
//console.log('created');
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));
}
}
}
},
components: {
'TodoHeader': TodoHeader,
'TodoInput': TodoInput,
'TodoList': TodoList,
'TodoFooter': TodoFooter
}
}
</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>
0
안녕하세요 윤희님..! :) 템플릿 태그 안에 뷰 디렉티브 속성 정의하실 때 띄어쓰기가 되어 있어서 제대로 문법이 인식 안되는거 같아요..! :) 아래 글에서 세번째 에러 케이스 글 한번 읽어보시고 코드 수정해보시면 될 것 같습니다 :)
진행하시다가 또 모르시는 거 있으면 알려주세요! :)
0
<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="removeTodo(todoItem, index)">
<i class="fas fa-trash-alt"></i>
</span>
</li>
<!--<li>2</li>
<li>3</li> -->
</ul>
</div>
</template>
<script>
export default {
props: ['propsdata'],
data: function() {
return {
todoItems: []
}
},
methods: {
removeTodo: function(todoItem, index) {
this.$emit('removeItem', todoItem, index);
//console.log(todoItem, index);
//localStorage.removeItem(todoItem); //api
//this.todoItems.splice(index, 1);
},
toggleComplete: function(todoItem, index) {
console.log();
}
}
}
</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>
0
<template>
<div class="inputBox shadow">
<input type="text" v-model = "newTodoItem" v-on:keyup.enter="addTodo">
<!--<button v-on:click="addTodo">add</button>-->
<span class="addContainer" v-on:click="addTodo">
<i class="fas fa-plus addBtn"></i>
</span>
</div>
</template>
<script>
export default {
data: function() {
return {
newTodoItem: ""
}
},
methods: {
addTodo: function() {
//console.log(this.newTodoItem);
if (this.newTodoItem !== '') {
this.$emit('addTodoItem', this.newTodoItem);
this.clearInput();
}
var obj = {completed: false, item: this.newTodoItem};
localStorage.setItem(this.newTodoItem, JSON.stringify(obj));
this.clearInput();
},
clearInput: function() {
this.newTodoItem = '';
}
}
}
</script>
<style scoped>
input:focus {
outline: none;
}
.inputBox {
background: white;
height: 50px;
line-height: 50px;
border-radius: 5px;
}
.inputBox input {
border-style: none;
font-style: 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>
Chrome 개발자 모드 확장이 안됨
0
259
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
254
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
368
3
로컬 스토리지는 어디에 있나요?
1
280
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