Error after npm run dev do not use v-for index as key on <transition-group>

[akbarsaputrait]

Do not use v-for index as key on <transtion-group> children, this is the same as not using keys.

> npm run development
> @ development C:\wamp\www\bpkadmalang_v2
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --con

 95% emitting

 ERROR  Failed to compile with 1 errors

 error  in ./node_modules/vue-notif/src/Notification.vue

(Emitted value instead of an instance of Error)
  Error compiling template:

      <div>
          <!-- single -->
          <transition v-if="self_show" name="slide-fade">
              <div :class="classObj(self_type)" class="item" @click="closeSelf()">
                  <button class="delete" @click="closeSelf()"/>
                  <div class="media">
                      <div v-if="self_icon" class="media-left">
                          <figure class="icon is-large">
                              <img :src="getIcon(self_type)">
                          </figure>
                      </div>
                      <div class="media-content">
                          <h4 class="title">
                              <strong>{{ self_title }}</strong>
                          </h4>
                          <p class="subtitle">{{ self_body }}</p>
                      </div>
                  </div>
              </div>
          </transition>

          <!-- events -->
          <template v-if="!self_title">
              <span v-if="checkForGroup()"
                    id="close_all"
                    class="tag is-rounded is-dark is-medium" @click="closeAll()">
                  Close All
                  <button class="delete"/>
              </span>

              <transition-group name="slide-fade" tag="ul">
                  <li v-for="(one,index) in notif_group"
                      v-if="IsVisible(index)"
                      :key="index"
                      :class="classObj(one.type)"
                      class="item"
                      @click="closeNotif(index)">

                      <button class="delete" @click="closeNotif(index)"/>
                      <div class="media">
                          <div v-if="one.icon" class="media-left">
                              <figure class="icon is-large">
                                  <img :src="getIcon(one.type)">
                              </figure>
                          </div>
                          <div class="media-content">
                              <h4 class="title">
                                  <strong>{{ one.title }}</strong>
                              </h4>
                              <p class="subtitle">{{ one.body }}</p>
                          </div>
                      </div>

                  </li>
              </transition-group>
          </template>
      </div>

  - Do not use v-for index as key on <transtion-group> children, this is the same as not using keys.

[ctf0]

this is related to https://github.com/ctf0/vue-notif, please manually update the package Notification.vue with https://github.com/ctf0/vue-notif/blob/master/src/Notification.vue & try again

Update: new release for vue-notif is published, plz update ur npm dep

[kfulk14]

@ctf0 in my package.json I have "vue-notif": "^1.1.10" but I am still seeing this error.

[ctf0]

@kfulk14 plz open a new ticket with the error u r getting