Я столкнулся с проблемой при попытке смены содержимого. По сути, мой массив данных отображается в разных частях DOM в зависимости от state
.
Основа c Концепция:
ОТКРЫТО
- обратная связь 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, с которым можно поиграться, это здесь .
Спасибо всем, кто щадит момент, чтобы подумать!