执行循环时，需要使用
我在尝试转换内容转换时遇到了一个问题。从本质上讲，我的数据数组显示在DOM的不同部分，具体取决于state。
基本概念：
打开
- 反馈1[完成]
- 反馈2[完成]
- 反馈3[完成]
关闭
我试图实现的目标：当你按下"关闭"时，反馈从打开淡出，并在关闭部分下淡出
这就是我尝试过的：使用转换渲染"关闭"项目：
<transition name="fade">
<v-row v-if="feedbackItem.state ==='closed'" v-for="feedbackItem in closedTasks" :key="feedbackItem.id">
<p>
{{ feedbackItem.feedback }}
</p>
</v-row>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
但它不能根据需要工作(没有可见的转换(，如果有多个关闭的项，"关闭"下的元素甚至会被隐藏。我认为这与计算项目列表的呈现方式有关。线路v-if="feedbackItem.state ==='closed'"可能造成问题。也许有人知道如何最好地实现期望的结果，或者我做错了什么？
可以玩的Codepen在这里。
感谢所有抽出时间思考的人！
transition group:
<transition-group name="fade" tag="div">
<v-row v-if="feedbackItem.state ==='closed'" v-for="feedbackItem in closedTasks" :key="feedbackItem.id">
<p>
{{ feedbackItem.feedback }}
</p>
</v-row>
</transition-group>
你可以在这里阅读更多。
tag="div"是将包装项目列表的元素。
只是一个提示，将v-if和v-for一起使用是一种糟糕的做法。最好有一个computed属性来过滤要循环的项。