인프런 커뮤니티 질문&답변
작성한 질문수
답변 8
5
<li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">
이 부분에 in todoItems를 in propsdata로 바꾸시면 될거에요! 제가 그랬거든요,,,
1
1
1
univue
질문자
<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
univue
질문자
<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
0
univue
질문자
<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>