Vue. js динамика c компоненты не меняются - PullRequest
Новая
       6

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

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

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

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

1 Ответ

2 голосов
/ 18 марта 2020

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

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

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

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

...