now there is a need for animated list rendering.
but I found a problem in the process of writing, and I don"t know how to solve it
the existing parent component constantly fetches the value passed by the server through socket, puts it into an array, and then passes the array to the child component
socket.onmessage = (event) => {
const socketData = JSON.parse(event.data)
if (socketData.type === "wz") {
this.wzSocket = socketData.data
} else if (socketData.type === "warn") {
this.warningSocket.unshift(socketData.data)
}
}the unshift used here always wants the first value to enter the array to have a dynamic effect.The
subcomponent transitions the list of passed arrays, but finds that if key fills in the object item, the background will report an error, key duplicates, and object cannot be used as a key, recommendation to use string or number.
so this side is changed to index.
<transition-group name="list" tag="span">
<div v-for="(item,index) in warningData" :key="index" class="list-item">
{{item.recordtime}} +{{index}}
<el-button type="text" size="mini" @click="handleClickDetails(item)"></el-button>
</div>
</transition-group>existing effect:
Afteris rendered, if the key is filled with item objects, then the animation will always appear first in the list, but if you fill in index, the animation will appear in turn. If you use the method to generate key dynamically. Then all will be animated.
so, how can we always make the first element of an array have a dynamic effect
?