v-for 에서 나타난 eslint-plughin-vue 에러 질문

Question

안녕하세요~! 강의를 너무 잘 듣고 실습하면서 테스트 하고 있는 수강생 입니다. 다름이 아니라 현재 강의에서도 보여지듯이, div tag에서 v-for문을 사용하여 api 값을 받아 차례대로 뿌려줍니다. 그런데 빨간줄이 생기며 eslint-plughin-vue 에서 The template root disallows 'v-for' directives. 라는 경고가 나옵니다. (추가로 v-for-key도 나오긴 합니다..) 이 부분은 따로 해결 방법이 없는 건가요?? 구글링과 eslint를 활성화하지 않았는데도 불구하고 계속 에러가 생기고 이젠 에러로 인식을 하는지 화면에 해당 api 값을 뿌려주지 못합니다. 감사합니다!

캡틴판교 · Answer

안녕하세요 승윤님, 좋은 질문 주셨네요. 말씀하신 빨간 줄은 애플리케이션 동작과 크게 관련이 없는 문법 에러입니다. 하지만 ESLint에서 안내해준대로 가급적 v-for 디렉티브를 사용하실 때는 v-bind:key를 꼭 사용해주시면 좋아요. 이 내용은 중급 강좌에서 한번 언급드린 적이 있어서 별도로 언급을 안했던 것 같습니다. 결론적으로 v-bind:key에 id 값 연결해주시면 될 것 같습니다. 강의 수강해주셔서 감사합니다!