To do list 만들어보기
뷰는 사용해봐도 그냥 옮기는 수업 3일뿐이었던 난 지금부터 해석해보며 vue를 이해해보고자한다.
<template>
<div>
<input type="text" v-model="newTodoItem">
<button v-on:click="addTodo">추가</button>
<ul>
<li v-for="(todoItem, index) in todoItems" :key="todoItem.id">
<span v-if="!todoItem.edt">
{{ todoItem.title }}
<!-- <p v-text="todoItem.title"></p> -->
</span>
<span v-else>
<input type="text" v-model="newTodoEdt">
</span>
<button v-on:click="edtTodo(index)">수정</button>
<button v-on:click="removeTodo(todoItem, index)">삭제</button>
</li>
</ul>
</div>
</template>처음 설계를 시작하며
To do list를 작성하여 추가하는 기능과 api를 통해 20개를 불러오는 작업을 진행하려고 계획하였다.
그래서 template에 input 박스를 생성하였고 타입은 text 형식으로 진행하였고 model을 만들고 변수 명 newTodoItem을 대입하였다. 이건 나중에 api에서 키값을 받아오기 위함이었다.
그럼 아래 api에서 불러오는 20개의 타이틀과 내가 추가한 list 항목을 추가할 부분을 만들었다. 구조는 ul에 li 구조로 진행하였다.
api를 통해 데이터를 받아오기 위한 구조를 위해 li에 for문을 돌렸다.
v-for 문으로 (todoItem, index) 변수를 만들었고 그안에 todoItems를 넣었다.
그리곤 어떤 키값을 받아오냐 설정을 위해서 key 값에 todoItem변수에 . (dot)으로 접근하여 id 값을 불러오도록 설정하였다.
그리곤 기능을 설정하였다.
span 으로 두개의 경우를 설계하였다. if 만약 !todoItem이 아닐 경우에 (false/true 설정한 값에 따라 달라짐) 보간법으로 작성 된 todoItem 변수에 접근하여 title을 가져온다.
그리고 수정 버튼을 클릭하면 model 박스에 텍스트 타입으로 나타나도록 한다.
그럼 이제 버튼을 클릭할 경우 이벤트가 발생하도록 설정해줘야했다.
button v-on:click 클릭할 경우 edtTodo(index) 함수를 실행시키게 됩니다.
다음 버튼은 삭제 버튼인데요 삭제 버튼을 클릭하면 removeTodo(todoItem, index)함수를 실행시키게됩니다.
<script>
import axios from 'axios'
export default {
name: 'TodoList',
data(){
return {
todoItems: [],
newTodoItem: '',
newTodoEdt: ''
}
},
mounted() {
this.initdata()
},
methods: {
initdata() {
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(response => {
let list = response.data.splice(0, 20)
for(let i=0; i<list.length; i++) {
this.todoItems.push({
id: list[i].id,
title: list[i].title,
edt: false
})
}
})
},
edtTodo(index) {
if (this.todoItems[index].edt) {
this.todoItems[index].edt = false
} else {
this.todoItems[index].edt = true
}
this.edtEnd(index)
},
edtEnd(index) {
this.todoItems[index].title = this.newTodoEdt
},
addTodo() {
console.log(this.newTodoItem)
let todo = {}
todo.id = this.todoItems.length + 1
todo.title = this.newTodoItem
this.todoItems.push(todo)
console.log(this.todoItems.length)
},
removeTodo(todoItem, index){
localStorage.removeItem(todoItem);
//splice() 첫번째 인자값(index)로 부터 두 번째 인자값(1) 만큼을 삭제한다.
this.todoItems.splice(index, 1);
}
}
}
</script>이제 스크립트를 보며 어떻게 함수를 짲는지 해석해보자.
api를 불러오기 위해 엑시오스를 import 시켰다.
export default 기본으로 입력하고 {함수를 객체화 시켰다.}
어디서 오류가 발생하는지를 파악하기 위해 name을 붙여주었고
data() 함수에 return 으로 변수들의 값을 지정하였다.
todoItems 변수에 빈 배열을 지정하고
newTodoItem, newTodoEdt 변수엔 '' 빈 문자열을
지정한 후 리턴으로 밖으로 내보냈다.
이제 methods에 함수들을 하나하나 만들어주려고한다.
첫번째로 intdata() 함수를 만들었다.
생각해보자 내가 얼마나 api에서 데이터를 호출해서 올것인가를 지정해야한다.
그리고 그 제이슨 파일에서 어떤 정보를 가지고 올것인가를 지정해야한다.
.then은 프라미스에서 가장 중요하고 기본이 되는 메서드입니다.
비동기 메소드가 성공적으로 동작했을때 실행할 Callback Function을 .then(response => {
/ do something /
})
문법에서 list에 response.date를 대입시킵니다. 그럼 얼마나 가져올 것인지 써야하는데 splice라는 메소드를 이용하여 인덱스 0에서 20까지를 가져온다고 설정하였습니다.
그럼 편하게 for문을 사용하여서 가져올것인데 반복문을 지정해줘야겠죠?
for(let i는 0이라고 초기값을 지정하고 i는 리스트의 랭스값 길이 만큼 반복한다라고 지정하고 i가 1씩 증가하도록합니다.)
todoTtems에 push 메소드를 이용하여서 대입시킵니다.
이것을 총 20까지 반복시킵니다.
edtTodo(index) 함수를 지정합니다.
if문으로 만약 this.todoItems에 변수에 접근하여 edt가 false일 때 수정합니다.
false가 아닐땐 수정하지 않습니다.
수정을 끝내고 싶을땐 edtEnd 함수를 실행시킵니다.
edtEnd(index) {
this.todoItems의 변수에 배열안에있는 title에 접근하여 newTodoEdt를 대입시킵니다.
}
