Динамические компоненты Vue.js не меняются

Question

Я создаю SPA на основе Vue.js, где я хочу переключаться между несколькими частями контента:

<template>
    <transition name="fade">
        <component 
            :is="options[active].type" 
            v-bind="options[active].props"
        />
    </transition>
</template>

<script>
const content = [
    {type: 'ContentHeader', props: {...}},
    {type: 'ContentModule', props: {...}},
    {type: 'ContentModule', props: {...}}
];

import ContentHeader from '...';
import ContentModule from '...';

export default {
    components: {
        ContentHeader,
        ContentModule
    },

    data: () => ({
        active: 0,
        options: content
    })
};
</script>

Когда я меняю activeсвойство от 0 до 1, динамический компонент изменяется и переход запускается. Однако переключения на последний компонент нет - он имеет тот же тип элемента, что и предыдущий. Свойства компонента отличаются и отображаются правильно, но переход не осознает, что произошло изменение, и не срабатывает.

Есть идеи, как я могу это решить - или другой подход к объединению модулей в переходе?

Answer 1

Поскольку компонент используется повторно, нет нового экземпляра для обмена, и переход не запускается, поскольку экземпляр / шаблон используется повторно. Это поведение по умолчанию. Но вы можете изменить это, используя уникальныйkey:

<component 
    :is="options[active].type" 
    v-bind="options[active].props"
    :key="active"
/>

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

Этот вопрос часто возникает в контексте маршрутизатора, имеющего несколько маршрутов с использованием одного и того же компонента, и тогда ответ состоит в том, чтобы использовать key также.