Vue переходов при смещении контента - PullRequest
Новая
       9

Vue переходов при смещении контента

0 голосов
/ 11 марта 2020

Я столкнулся с проблемой при попытке смены содержимого. По сути, мой массив данных отображается в разных частях 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, с которым можно поиграться, это здесь .

Спасибо всем, кто щадит момент, чтобы подумать!

1 Ответ

1 голос
/ 11 марта 2020

При выполнении циклов вам необходимо использовать 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, которое фильтрует нужные элементы по l oop.

...