An error raised.

[mikolaje]

Hi, Thank you for you tutorial. I just wonder when I added transition-group these two lines,

 <transition-group name="list" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
      <li v-for="(data, index) in skills" :key='index'>{{ data.skill }}</li>
</transition-group>

it would raise an error on the console as below. Thanks.

 ERROR  Failed to compile with 1 errors                                                                                                                                                             12:01:00 PM

 error  in ./src/components/Skills.vue?vue&type=template&id=4cdb3572&scoped=true&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
    <div class="hello">
      <div class="holder">
        <form @submit.prevent="addSkill">
          <input type="text" placehoder="Enter a skill you have.." v-model="skill" v-validate="'min:5'" name="skill" autocomplete="off">
  
          <transition name="alert-in" enter-active-class="animated flipInX" leave-active-class="animated flipOutX">
            <p class="alert" v-if="errors.has('skill')"> {{ errors.first('skill')}} </p>
          </transition>
        </form>
  
        <ul>
          <transition-group name="list" enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
            <li v-for="(data, index) in skills" :key='index'>{{ data.skill }}</li>
          </transition-group>
        </ul>
        <p> These are the skills that you process.</p>
     
      </div>
    </div>
  
  - Do not use v-for index as key on <transtion-group> children, this is the same as not using keys.


 @ ./src/components/Skills.vue?vue&type=template&id=4cdb3572&scoped=true& 1:0-392 1:0-392
 @ ./src/components/Skills.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.140.0.2:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Without these two lines, it would be normal again.

[devtrix-net]

Replace :key='index' with :key='index+1' more here: https://github.com/vuejs/vue/issues/9215