Cannot read property 'user_id' of undefined 가 떠요ㅠㅠ

Question

nuxt를 쓰는데 v-for="(rowItem, idx) in superMarketList" :key="rowItem.user_id" :class="{ even: idx % 2 == 1 }" > <td v-for="(colItem, name, j_idx) in rowItem" :key="colItem .user_id "> 빨간줄 부분을 넣으면 Cannot read property 'user_id' of undefined 계속 떠요ㅠ 이게 컬럼에 데이터를 비운채로 실행하니까 뜨는거 같은데 빈컬럼을 지우니까 안뜨더라구요 데이터를 안넣고 배열된 테이블을 띄우는 방법이 없을까요?

캡틴판교 · Answer

안녕하세요 hia님, 제가 답변이 늦어졌네요 :) v-for 디렉티브는 배열, 객체 등을 순회해서 엘리먼트를 반복적으로 생성하는 문법인데요. 값이 없으면 당연히 해당 동작이 수행되지 않을 겁니다. 만약 일단 빈 값이라도 뿌리시길 원한다면 화면에 표시되는 값은 비운 상태로 객체를 여러 개 배열에 담아 표시하시면 될 것 같아요. 그런데 일단 위의 key 속성에는 유니크 값이 들어가 있어야 v-for 디렉티브가 정상적으로 동작하기 때문에 요건 잘 지정해 주셔야 합니다 :)