작성한 질문수 2

2

안녕하세요 동한님, 제가 보기 편하게 소스까지 올려주셔서 감사합니다 :) 말씀하신 오류는 자바스크립트 문법 검사 차원에서의 오류이고 실행과 관련된 에러는 아닙니다. 크게 신경 안쓰셔도 될 것 같아요 :) 혹시 ESLint 에러에 대해서 더 자세히 확인해보고 싶으시면 아래 링크 참고해보시구요. 수강해주셔서 감사합니다 :)

https://eslint.org/docs/rules/

0

vue.config.js 생성하면 오류는 안납니다만, 체크아이콘 기능은 동작하지 않습니다.ㅡㅡ;

0

답변 주셔서 감사합니다. 그런데 기능 추가한것들중에서 체크아이콘을 클릭하면 아무런 반응이 일어나지 않습니다. 

0

혹시몰라 전체소스 올려드릴게용

<template>
    <div>
        <ul>
            <li v-for="(todoItem, index ) in todoItems" v-bind:key="todoItem.item" class="shadow">
                <i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}"
                   v-on:click="toggleComplete(todoItem, index)"></i>
                <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){
                localStorage.removeItem(todoItem);
                this.todoItems.splice(index, 1);
            },
            toggleComplete: function(todoItem, index){
                todoItem.completed = !todoItem.completed;
                localStorage.removeItem(todoItem.item);
                localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
            }
        },
        created: function () {
            if(localStorage.length > 0){
                for (var i=0;i<localStorage.length;i++){
                    if (localStorage.key(i) !== 'loglevel:webpack-dev-server'){
                        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;
        margin: 0.5rem 0;
        padding: 0 0.9rem;
        background: white;
        border-radius: 5px;
    }
    .removeBtn {
        margin-left: auto;
        color: #de4343;
    }
    .shadow {
        box-shadow: 5px 10px 10px rgba(0,0,0,0.03);
    }
    .checkBtn {
        line-height: 45px;
        color: #63acde;
        margin-right:5px;
    }
    .checkBtnCompleted {
        color: #b3adad;
    }
    .textCompleted {
        text-decoration: line-through;
        color: #b3adad;
    }
</style>