I am developing a Vue.js single-page application where I intend to smoothly transition between different sections of content:
<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>
When I update the active property from 0 to 1, the dynamic component changes and triggers the transition. However, switching to the last component does not trigger a transition - even though it has the same element type as the previous one. The component's props are different and render correctly, but the transition fails to acknowledge the change and doesn't activate.
Any suggestions on how to address this issue? Or perhaps an alternative method for transitioning between modules in Vue.js?