미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
i 태그에 v-on:click 이벤트랑 v-bind:class가 적용되지 않습니다.
강의를 보면서 따라서 타이핑하고 있는데, i 태그에서 이벤트랑 클래스 바인딩이 안됩니다. 아래에 span태그에서는 적용되는데, 이유가 뭔지 알 수 있을까요?
<template>
<div>
<ul>
<li v-for="(todoItem, index) in todoItems" v-bind:key="index" 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>
<script>
export default {
data: function() {
return {
todoItems: [],
}
},
methods: {
removeTodo: function(todoItem, index) {
console.log('ffff');
localStorage.removeItem(todoItem);
this.todoItems.splice(index, 1);
},
toggleComplete: function(todoItem) {
todoItem.completed = !todoItem.completed;
}
},
created: function() {
if(localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
}
}
}
}
</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;
align-self: center;
}
.checkBtnCompleted {
color: #b3adad;
}
.textCompleted {
text-decoration: line-through;
color: #b3adad;
}
</style>
