尝试<animation-group>在我的组件模板中使用，但出现错误：
[Vue warn]: <transition-group> children must be keyed: <div>
但我很确定它们已锁定。
//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>
`
}
我认为该设置v-bind:key="index"可以满足此要求，但是我得到上面粘贴的错误。
我想要完成的是：我有一些显示在页面上的过滤器来过滤页面上显示的产品。在移动设备中，我想将这些过滤器隐藏在一个按钮后面，一旦按下该按钮，就会在侧面滑出菜单中显示过滤器。
虽然我可以在页面上复制相同的组件两次，但组件不是完全相同的实例，即点击过滤器会触发该功能来过滤页面上的产品，但它设置了自己的数据属性，我我曾经说过“如果数据属性‘selected’为真，则向组件添加一个‘selected’类。当我调整窗口大小时，组件的另一个实例没有将‘selected’数据属性标记为‘true’ .
我期待这一点，因为，从文档：
请注意，当单击按钮时，每个按钮都保持自己的独立计数。这是因为每次使用组件时，都会创建它的一个新实例。
...但是最好的方法是什么？
我的想法是只在组件上设置一个“移动”类，而 .mobile css 会以不同的方式设置组件的样式，但我需要让它在嵌套的位置突破。
例如
<body>
<header>
<!-- desktop -->
<guitar-filters>
<header>
<!-- mobile -->
<guitar-filters>
</body
这是我的 Vue 组件“guitar-filters”，它显示了几个名为“instrument-filter”的组件：
Vue.component('guitar-filters', {
data: function() {
return {
isMobile: false
}
},
mounted: function() {
var comp = this;
this.setIsMobile();
window.addEventListener('resize', function() {
comp.setIsMobile();
});
},
methods: {
setIsMobile: function() {
this.isMobile = (window.innerWidth <= 900) ? true : false;
}
},
template: `
<ul class="filters" :class="{mobile: isMobile}">
<li>
All
</il>
<li>
Series
<ul>
<instrument-filter …