일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 구글CSS
- 스타일가이드
- CSS애니메이션
- python
- 코딩컨밴션
- vueJS
- vue-cli
- 자기개발
- 로딩UI
- 구글스타일가이드
- 투두리스트
- 코딩규칙
- 뉴스수집
- Vue.js
- css rule
- 웹스크래핑
- vuejs입문
- to do list
- @keyframes
- javascript
- 파이썬
- html제거
- 자바스크립트
- 코딩가이드
- css규칙
- google style guide
- 개발회고
- 프레임워크
- MariaDB
- CSS로딩
- Today
- Total
코드공부방
Vue.js To Do List 만들기 #3 컴포넌트 구현(2) 본문
Vue.js To Do List 만들기 #3 컴포넌트 구현(2)
컴포넌트 생성 및 등록(2)
컴포넌트 구현 > TodoList
TodoList컴포넌트는 localStorage에 저장되어있는 item 목록을 화면에 보여주는 역할을 한다. 순서가 없는 목록은 ul, li 요소를 사용한다. 먼저 localStorage에 저장되어있는 목록을 vue 데이터 todoItems에 저장한다.
/* /src/components/TodoList.vue > <script></script> */
export default {
data(){
return {
todoItems: []
}
},
created(){
if(localStorage.length > 0){
for(var i = 0; i < localStorage.length; i++){
this.todoItems.push(localStorage.key(i));
}
}
}
}
created()는 라이프사이클 단계 중 data속성과 methods속성이 정의된 후 실행되는 단계이다.
다음으로 v-for디렉티브를 사용하여 todoItems의 목록만큼 반복하여 <li> 태그를 출력한다.
<!-- /src/components/TodoList.vue > <template></template> -->
<section>
<ul>
<li v-for="todoItem in todoItems">{{ todoItem }}</li>
</ul>
</section>
내가 저장한 할일 목록이 잘 출력됐다. 그런데 뭔가 불편하다. 할일을 추가하면 localStorage에는 저장이 되는데 화면에는 새로고침을 해야만 출력이 되고 있다.
이 문제는 나중에 다시 수정하기로 하고 삭제 기능을 먼저 추가한다. 삭제기능을 추가하기 위하여 먼저 <li> 태그내에 삭제 버튼을 추가하고, 버튼을 클릭했을때 삭제 기능(removeTodo메소드)이 실행되도록 클릭 이벤트를 추가한다.
<!-- /src/components/TodoList.vue > <template></template> -->
<section>
<ul>
<li v-for="todoItem in todoItems">
{{ todoItem }}
<button v-on:click="removeTodo">삭제</button>
</li>
</ul>
</section>
/* /src/components/TodoList.vue > <script></script> */
export default {
data(){
return {
todoItems: []
}
},
created(){
if(localStorage.length > 0){
for(var i = 0; i < localStorage.length; i++){
this.todoItems.push(localStorage.key(i));
}
}
},
methods: {
removeTodo(){
//삭제기능
}
}
}
삭제 버튼을 클릭했을때 선택된 할 일의 텍스트 값과 인덱스를 가져오기 위하여 template 코드와 removeTodo메소드를 수정한다. 할 일 목록의 index는 vue에서 내부적으로 관리하고 있다.
<!-- /src/components/TodoList.vue > <template></template> -->
<section>
<ul>
<li v-for="(todoItem, index) in todoItems" :key="todoItem">
{{ todoItem }}
<button v-on:click="removeTodo(todoItem, index)">삭제</button>
</li>
</ul>
</section>
/* /src/components/TodoList.vue > <script></script> */
export default {
data(){
return {
todoItems: []
}
},
created(){
if(localStorage.length > 0){
for(var i = 0; i < localStorage.length; i++){
this.todoItems.push(localStorage.key(i));
}
}
},
methods: {
removeTodo(todoItem, index){
console.log(todoItem, index);
}
}
}
내가 삭제하고자 하는 할 일의 내용과 index값이 console창에 출력되는지 확인한다.
선택한 아이템의 index를 알았으니 이제 localStorage와 vue데이터에서 선택한 아이템을 삭제하기 위하여 removeTodo메소드를 수정한다.
/* /src/components/TodoList.vue > <script></script> */
export default {
data(){
return {
todoItems: []
}
},
created(){
if(localStorage.length > 0){
for(var i = 0; i < localStorage.length; i++){
this.todoItems.push(localStorage.key(i));
}
}
},
methods: {
removeTodo(todoItem, index){
localStorage.removeItem(todoItem);
//splice()는 첫번째 인자값(index)로부터 두번째 인자값(1)만큼을 삭제한다.
this.todoItems.splice(index, 1);
}
}
}
여기서 마무리 하고 다음 포스팅에서는 전체 삭제하기 버튼이 들어가는 TodoFooter컴포넌트를 구현 할 예정이다.
(계속..)
2019/09/05 - [vue.js] - Vue.js To Do List 만들기 #2 컴포넌트 구현(1)
2019/09/05 - [vue.js] - Vue.js To Do List 만들기 #1 프로젝트 생성
2019/07/24 - [vue.js] - vue.js 입문
'웹프로그래머 > vue.js' 카테고리의 다른 글
Vue.js To Do List 만들기 #4 컴포넌트 구현(3), 문제해결 (2) | 2019.09.06 |
---|---|
Vue.js To Do List 만들기 #2 컴포넌트 구현(1) (2) | 2019.09.05 |
Vue.js To Do List 만들기 #1 프로젝트 생성 (1) | 2019.09.05 |
vue.js 입문 (0) | 2019.07.24 |