Problems and Solutions

This may cause an update error

This error indicates that in your V-for loop, key   The value may be duplicate.

Duplicate key will cause rendering errors.

The reason for the error is that I didn’t add the key attribute at the beginning. The error code fragment is as follows:

<template>
    <vue-aplayer
            :audio="audio"
            :lrc-type="3"
            :fixed='fixed'
            :autoplay='autoplay'
            :order='order'
            :volume='volume'
            :theme='theme'
            :listFolded='listFolded '
    />
</template>

No more errors will be reported after adding key

<template>
    <vue-aplayer
            :audio="audio"
            :lrc-type="3"
            :fixed='fixed'
            :autoplay='autoplay'
            :order='order'
            :volume='volume'
            :theme='theme'
            :listFolded='listFolded '
            :key="audio.name"
    />
</template>

Note: audio attribute is the list I want to traverse, and name is the primary key in my list, so here I take audio. Name as the value of key ,   key must be unique.

Official description

key

Expectation: the special attributes of number | string key are mainly used in Vue’s virtual DOM algorithm to identify vnodes when comparing old and new nodes. If you do not use keys, Vue will use an algorithm that minimizes dynamic elements and tries to modify/reuse elements of the same type in place as much as possible. When using a key, it rearranges the order of elements based on the change of the key, and removes elements that do not exist in the key. Child elements with the same parent element must have a unique key. Duplicate keys can cause rendering errors. The most common use case is the combination of V-for :

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

It can also be used to force replacement of elements/components rather than reuse it. It may be useful when you encounter the following scenarios:

Completely trigger the life cycle hook of the component to trigger the transition, for example:

<transition>
  <span :key="text">{{ text }}</span>
</transition>

When text changes, <span> is always replaced rather than modified, so a transition is triggered.