Блог

Главная - Вопросы по программированию - Почему компонент не отображается при изменении маршрута?

Почему компонент не отображается при изменении маршрута?

#javascript #vue.js #components #vue-router

Вопрос:

У меня есть шаблон, и есть компонент:

         <super-visor
            v-if="!top10ModeActivated"
            v-for="cart in getCarts(index   1)"
            :cart="cart"
            :key="cart.position"
        ></super-visor>

Как вы можете видеть, этот компонент отображается, когда top10ModeActivated только false ;

    computed: {
        top10ModeActivated() {
            return this.$store.state.moduleSearch.top10ModeActivated;
        },
   }

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

Кто-нибудь может мне помочь и описать, как я могу это исправить? Потому что я новичок в VueJS.

Ответ №1:

Используйте методы, потому что вычисляемые свойства кэшируются. Смотрите ниже:

    methods: {
        top10ModeActivated() {
            return this.$store.state.moduleSearch.top10ModeActivated;
        },
   }

и

         <super-visor
            v-if="!top10ModeActivated()"
            v-for="cart in getCarts(index   1)"
            :cart="cart"
            :key="cart.position"
        ></super-visor>

Комментарии:

1. Я сделал ваше предложение, но у меня такая же проблема.

2. Я удалил условие и вижу этот шаблон только при перезагрузке страницы.

3. Возможно свойство «Активированный режим.top 10» не реагирует. Вы его инициализировали? => … состояние: { moduleSearch: { top10ModeActivated: ‘…’ }, … } …

4. но это не работает, даже когда я удалил условие с помощью этого реквизита. Похоже, что компонент никогда не отображается при изменении маршрута. Только когда я перезагружаю страницу.

Ответ №2:

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

Метки: