Переход между одним и тем же компонентом? - PullRequest
Новая
       5

Переход между одним и тем же компонентом?

0 голосов
/ 10 марта 2020 
// Template
<transition name="fade">
    <my-component :my-prop="data[currentIndex]" />
</transition>

// CSS
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

У меня также есть кнопка для изменения текущего индекса и обновления данных компонента. это не работает, и я предполагаю, что это потому, что изменение данных не делает его новым компонентом, который необходим для запуска перехода.

Все примеры, которые я видел в Интернете, предназначены для переключения между различными компонентами, эта работа, но Я не могу применить его, поскольку все это для одного и того же компонента.

Другое решение, которое я нашел, состояло в том, чтобы создать группу компонентов в v-for и затем иметь v-show на текущем, но тогда мне нужно абсолютное позиционирование, чтобы предотвратить переходы переходов, и это не кажется, способ сделать это.

Полагаю, я мог бы выполнить переходы в теге script обновленной функции или что-то в этом роде, но это кажется неправильным способом, когда переходы должны обрабатывать это для меня. Я что-то упустил?

1 Ответ

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

Вчера была такая же проблема! ^^ "Это работало нормально, когда я добавил атрибут: key =" "к своему компоненту (даже если в дочернем компоненте нет ключа с именем prop). Попробуйте следующее: 

<transition name="slide">
    <my-component :key="currentIndex" :my-prop="data[currentIndex]" />
</transition>

Я не знаю Пока не знаю, почему, но я думаю, если реквизит является объектом, он не обнаруживает изменения? Или, может быть, вы должны передать ключевой атрибут (но я видел несколько примеров, не использующих ключевой атрибут ...) Скажите, работает ли он;)

Редактировать: я видел, что вы изменили имя перехода, и стиль не включает это имя. Попробуйте описанное выше решение с именем и стилем по умолчанию ("fade") https://vuejs.org/v2/guide/transitions.html

...