Vue.js Transitiongroup children must be keyed...but they are keyed

//js

Vue.component('instruments', {
template: `
        <transition-group name="fade">
            <div class="instruments">
                <div class="instrument" v-for="(instrument, index) in filteredInstruments" v-bind:key="index">
                    <img v-bind:src="instrument.photo">
                    <span class="name">{{ instrument.name }}</span>
                    <span class="construction">{{ instrument.top }} / {{ instrument.backAndSides }}</span>
                    <span class="price">$ {{ instrument.price }}</span>
                </div>
            </div>
        </transition-group>
    `
}

<transition-group name="fade" tag="div" class="instruments">

Vue.js相关问答推荐

Vue3组合-如何在组件卸载时注销回调

Vue ChildComponent (GrandchildComponent) 应该更新 ParentComponent 的列表

vuejs：在确认提示之前更改 HTML

有没有办法将react 键作为值传递给由 v-for 创建的 v-model

vue3 + pinia：如何从？store 中获取一个值

vuetify/mdi 不显示图标

vuex 未知动作类型：addTodo

使用 nuxt.js 组件自动导入对性能不利吗？

在 Vue.js 中动态挂载单个文件组件

即使响应为 200，也会调用 Axios Catch

Vue 两种方式的 prop 绑定

使用 vue.js 的 axios 预检失败错误 301

VueJS 将 HTML 打印到页面

在组件的样式部分使用 Vue 变量

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

如何使用 Vuejs 和 Laravel 获取当前经过身份验证的用户 ID？

v-if inside v-for - 在两列中显示项目列表

安装后运行computed计算函数

$emit 不会触发子事件

Vue 3 组合 API 数据()函数