v-for 구문 v-bind:key

vue.js v-bind:key

아래와 같이 코드를 입력하면 v-for 추가하면 v-bind:key 입력 오류가 나타난다.

<template>
  <div id="app">
    <ul>
      <li v-for="(menu,i) in gnb ">
        <router-link v-bind:to="{ name: menu.name }" >{{i}}{{menu.name}}</router-link>
      </li>
    </ul>
    <router-view/>
  </div>
</template>

아래 내용을 보면 문자열 이나 숫자 타입으로 추가하라는 경고가 나온다.

해결방벙 :

1. key 값에 for의 인덱스 값 입력

<template>
  <div id="app">
    <ul>
      <li v-for="(menu,i) in gnb" v-bind:key="i">
        <router-link v-bind:to="{ name: menu.name }" >{{i}}{{menu.name}}</router-link>
      </li>
    </ul>
    <router-view/>
  </div>
</template>

 

2. 메뉴별 이름을 특정하고 싶다면 key 값에 for의 인덱스 값 과 메뉴명의 조합으로 입력

<template>
  <div id="app">
    <ul>
      <li v-for="(menu,i) in gnb" v-bind:key="`${menu.name}-${i}`">
        <router-link v-bind:to="{ name: menu.name }" >{{i}}{{menu.name}}</router-link>
      </li>
    </ul>
    <router-view/>
  </div>
</template>