<template>
<div id="app">
<TodoHeader></TodoHeader>
<TodoInput v-on:addTodoItem="addOneItem" v-bind:propsdata="validate" ></TodoInput> <!-- propsdata 선언 -->
<TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem" v-on:toggleItem="toggleOneItem"></TodoList>
<TodoFooter v-on:clearAll="clearAllItems"></TodoFooter>
<Modal v-if="showModal" @close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">
경고!
<i class="closeModalBtn fas fa-times " @click="showModal = false"></i>
</h3>
<h3 slot="body">
{{ message }}
</h3>
</Modal>
</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';
import Modal from './components/common/Modal.vue'
export default {
data: function() {
return {
todoItems: [],
showModal: false,
message: '',
validate: false //중복 체크 값 선언
}
},
methods: {
addOneItem: function(todoItem) {
var obj = {completed: false, item: todoItem};
localStorage.setItem(todoItem, JSON.stringify(obj));
// todoItems에 이미 같은 값이 있는지 체크
if(!this.todoItems.some(data => data.item == todoItem)) {
this.todoItems.push(obj)
this.validate = false; // 중복 체크 값 입력
} else {
this.message = '중복 데이터가 존재 합니다. 중복 데이터 : [' + todoItem + ']'
this.showModal = !this.showModal;
this.validate = true; // 중복 체크 값 입력
}
console.log('App.vue data : ' + this.validate); // 중복 체크 값 Log 출력
},
removeOneItem: function(todoItem, index) {
localStorage.removeItem(todoItem.item);
this.todoItems.splice(index, 1);
},
toggleOneItem: function(todoItem, index) {
// todoItem.completed = !todoItem.completed; // 같은 동작
this.todoItems[index].completed = !this.todoItems[index].completed;
// 로컬 스토리지의 데이터를 갱신
localStorage.removeItem(todoItem.item);
localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
},
clearAllItems: function() {
localStorage.clear();
this.todoItems = [];
}
},
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(JSON.parse(localStorage.getItem(localStorage.key(i))));
// this.todoItems.push(localStorage.key(i));
}
}
}
},
components: {
// 컴포넌트 태그명 : 컴포넌트 내용
'TodoHeader': TodoHeader,
'TodoInput': TodoInput,
'TodoList': TodoList,
'TodoFooter': TodoFooter,
Modal: Modal
}
}
</script>
<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>
<Modal v-if="showModal" @close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">
경고!
<i class="closeModalBtn fas fa-times " @click="showModal = false"></i>
</h3>
<h3 slot="body">
아무것도 입력하지 않으셨습니다.
</h3>
</Modal>
</div>
</template>
<script>
import Modal from './common/Modal.vue'
export default {
props: ['propsdata'], // propsdata 생성
data: function() {
return {
newTodoItem: "",
showModal: false,
propsd: this.propsdata
}
},
methods: {
addTodo: function() {
if(this.newTodoItem !== '') {
this.$emit('addTodoItem', this.newTodoItem);
console.log('TotoInput.vue data : ' + this.propsdata); // propsdata Log 출력
// 중복이 아닐 경우에만 Text Clear
if(!this.propsdata) {
this.clearInput();
}
}
else {
this.showModal = !this.showModal;
}
},
clearInput: function() {
this.newTodoItem = '';
}
},
components: {
Modal: Modal
}
}
</script>
