error 'index' is defined but never ... - 인프런

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

error 'index' is defined but never used no-unused-vars 가 나옵니다.

작성

2.7K

안녕하세요 판교님, 제목과 마찬가지로 저런 에러가 나옵니다 eslint 에러같아

vue.config.js 파일을 생성해서

module.exports = {
    devServer: {
        overlay: false
    }
}

셋팅도 해줬습니다. 서버재시작을 해도 저러네요ㅎㅎ;;

toggleComplete: function(todoItem, index){
    todoItem.completed = !todoItem.completed;
    localStorage.removeItem(todoItem.item);
    localStorage.setItem(todoItem.item, JSON.stringify(todoItem));
}

에 index를 지우면 에러가 사라지는데 페이지 상에 local storage에 반응이 없어집니다.

틀린게있나 싶어 이러저리 돌려가며 소스확인을 해봤는데 이상은 없는것 같아서 질문드립니다.

javascript vuejs es6 vuex

답변 4

장기효(캡틴판교)

지식공유자

2020. 04. 29. 13:05

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

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

퀄리

2020. 09. 28. 21:49

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

김동한

질문자

2020. 04. 29. 13:16

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

김동한

질문자

2020. 04. 28. 18:29

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

<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>

인프런 커뮤니티 질문&답변

error 'index' is defined but never used no-unused-vars 가 나옵니다.