[vue.js] v-for 출력 안 되는 오류

아.. 정말 삽질을 얼마나 했는지 모르겠다.

아래 코드 실행시 계속해서 Members의 값을 읽어오지 못했고, 도대체 이건 왜 안될까 약 한시간 넘게 삽질한것 같다. 

 <ul>
    <li :v-for="(member, idx) in Members" :key="idx">
      {{ member.role }}
    </li>
  </ul>

콘솔에서는 warn 메시지와 오류 메시지까지 뿜어내며 뭔가가 잘못되고 있다고 알려주었다.

분명히 {{Members}}를 해보면 안에 값들을 잘 읽어오는데 말이다.

Property "idx" was accessed during render but is not defined on instance.  

결국 문제는 콜론 : colon 문제였다. 

":"는 v-bind가 앞에 생략되어있다고 생각하면 된다. 

가령 v-bind:class="", v-bind:src 등.... v-for에 콜론을 붙이니 정상적으로 동작할리 없었다. 

 

v-bind: 남용하지 말자.

(: colon을 왜 쓰는지 모르고 따라했다 시간만 날렸지만, 이제서야 언제 써야하는지 제대로 알게되었네)

아래는 전체 코드. warn, error 메시지 모두 사라졌다!!

<template>
  <h1>Team Member</h1>
  <!-- <img :src="Members[0].profile" alt="프로필 사진" /> -->
  <ul>
    <li v-for="(member, idx) in Members" :key="idx">
      {{ member.role }}
    </li>
  </ul>
</template>

<script>
import Members from "../../assets/js/members.js";
export default {
  name: "TeamMember",
  data() {
    return {
      Members: Members,
    };
  },
};
</script>

<style>

</style>