BonBonSlick
@BonBonSlick
Vanilla Web Architect

Vue array of objects is not reactive?

export default class Menu extends Vue {
    @namespace(APP).Getter
    isServiceAnime!: boolean;

    menuItems: { title: string, icon: string, urlName?: string }[] = [
        {
            title:   this.isServiceAnime ? 'Gallery' : 'Anime',
            icon:    this.isServiceAnime ? 'fa far fa-image' : 'fa far fa-play',
            urlName: this.isServiceAnime ? GALLERY_NAME : ANIME_LIST_NAME,
        },

Нет реактивности, данные vuex обновлены как и результат getterа, а вот data и html старые, не обновились .
Если верно понял, то тут this.isServiceAnime всегда undefined, поетому выдает и отрисовует второй вариант, но даже если так, в mounted стоит обновление
@namespace(APP).Action
    useAnimeService!: () => void;

    mounted() {
        this.useAnimeService(); // gallery


У меня стоят ключи для шаблона и элементов
<template :key="this.$route.path">
    <div    :key="item.title"
                 v-for="item in this.menuItems"
            >


модуль
@Module({namespaced: true})
export default class App extends VuexModule {
    service: ServiceType = ServiceType.Anime;

    public get isServiceAnime(): boolean {
        return ServiceType.Anime === this.service;
    }


    @MutationAction
    public async useAnimeService(): Promise<object> {
        return {
            service: ServiceType.Anime
        };
    }

    @MutationAction
    public async useGalleryService(): Promise<object> {
        return {
            service: ServiceType.Gallery
        };
    }

}

заранее обьявлен параметр, так что должен быть реактивным в теории.

К тому же watch отрабатывает при изменении, ну да, как и изменение state и getter значения
@Watch('isServiceAnime', {immediate: true, deep: true})
    private onValueChange(value: string, oldValue: string) {
        console.log(value);
        console.log(oldValue);
    }


да, проверял я доку тут

Единственный вариант как я понял удалять и перезаписывать N элемент в watch, но правильно ли это?
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
public get isServiceAnime(): boolean {

@Watch('isServiceAnime', {immediate: true, deep: true})

Для boolean значения включаете deep? Круто.

да, проверял я доку тут

А здесь? Очевидно же - если одно свойство должно зависеть от другого, его следует сделать вычисляемым.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы