아이콘의 경우 새로 고침해야지 checkBtnCompleted가 적용됩니다
498
2 asked
<template>
<div>
<ul>
<li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">
<span v-on:click="toggleComplete(todoItem, index)">
<i class="checkBtn fas fa-check" v-bind:class="{ checkBtnCompleted: todoItem.completed }"></i>
</span>
<span v-bind:class="{ textCompleted: todoItem.completed }">{{ todoItem.item }}</span>
<span class="removeBtn" v-on:click="removeTodo(todoItem, index)">
<i class="fas fa-trash-alt"></i>
</span>
</li>
</ul>
</div>
</template>i 태그를 span 안에 넣은 이유는 클릭해도 아무 반응이 없어서 span 안에 넣었습니다.
completed 관련한 v-bind는 새로고침 안해도 바로 반영되는데 checkBtnCompleted 관련한 v-bind는 새로고침 해야지 체크표가 회색으로 변합니다.
어디가 문제인지 모르겠습니다
Answer 1
0
템플릿 쪽의 문법의 문제보다는 자바스크립트 레벨에서의 배열 값 변경이 잘 안되는 것 같은데 코드가 어떻게 되시나요?
0
TodoList.vue쪽 스크립트 코드입니다.
<script>
export default {
props: ['propsdata'],
methods: {
removeTodo: function (todoItem, index) {
this.$emit('removeItem', todoItem, index)
},
toggleComplete: function (todoItem, index) {
this.$emit('toggleItem', todoItem, index)
}
},
}
</script>App.vue쪽 스크립트 코드입니다
<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'
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.item);
this.todoItems.splice(index, 1);
},
toggleOneItem: function (todoItem, index) {
// todoItem.completed = !todoItem.completed;
console.log(typeof index);
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++) {
this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
// this.todoItems.push(localStorage.key(i));
// console.log(localStorage.key(i));
} // end for
} // end if
}, // end created
components: {
'TodoHeader': TodoHeader,
'TodoInput': TodoInput,
'TodoList': TodoList,
'TodoFooter': TodoFooter,
}
}
</script>0
JS 코드상으로도 문제가 없어 보이네요.. 혹시 아래 브랜치의 코드와 비교해서 다른 점이 있는지 확인해 보시겠어요? :)
https://github.com/joshua1988/vue-intermediate/tree/todo-app/components-refactoring/vue-todo/src
0
코드 비교 사이트를 이용해봤는데 탭 or 띄어쓰기와 같은 차이만 있고 다른건 별 차이가 없습니다.
node를 18.14.2 LTS를 쓰고 있고 웹팩이 아닌 그냥 vue create로 강의를 진행하고 있는데 이게 원인이 될 수 있을까요?
Chrome 개발자 모드 확장이 안됨
0
254
1
깃 권한 요청드립니다
0
118
1
vue.js 중급 리포지토리 권한 관련
0
118
1
vuex + axios 질문 있습니다!
1
198
2
깃 권한 요청드립니다!
0
161
1
강의 깃주소 문의
0
144
1
router-view에 props를 어떻게 넘길 수 있나요?
1
279
2
Vue가 인식되지 않는 현상
0
205
1
기초강좌는 어디있나요?
1
190
2
App.vue가 필요한 이유
0
192
1
getter가 정의되어 있지 않아 오류가 발생합니다.
1
253
1
뷰 라이프사이클
1
187
1
TSLint 말고 TSLint Vue 설치해도 되나요?
1
368
3
로컬 스토리지는 어디에 있나요?
1
279
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