Serwis z polem typu bool – reakcja na zmianę wartości

Mamy tu specow od vuejs? Mam z pozoru prosty kejs, ktory w angularze byl prosty i oczywisty natomiast w Vue nie wiem jak to dobrze rozwiazac. Mam serwis, w ktorym jest jakies pole typu bool. Gdy to pole zmienia wartosc, chce aby cos sie wyswietlilo. Normalnie w angularze ng-if ma watcha, ktory widzi ze cos sie zmienilo i aktualizuje template. Jak cos takiego osiagnac w Vue? Ponizszy kod nie dziala

<div id="communicate" v-if="isOpened()"> //po 2 sekundach powinno sie pojawic
sadad
    </div>
 
export default {
    name: 'component',
    methods: {
        isOpened: function() {
            return this.service.isOpened()
        }
    },
    mounted: function() {
        setTimeout(() => {
            this.service.setOpened(true) //zmienia flage na true po 2 sek
        }, 2000)
    }
};

2 rzeczy:

1. Czemu używasz funkcji zamiast po prostu w v-if dać this.service.open?
2. Jeśli nie możesz powyższego, to musisz użyć computed zamiast methods

Pierwszy sposob nie dziala. v-if nie ma watcha. Computed tez probowalem i tez nie dziala :/ COmputed dziala tylko gdy korzysta z property data:

nie wiem co masz schrzanione ale v-if oczywiście że działa. https://vuejs.org/v2/guide/conditional.html

mr_jaro napisał(a):

nie wiem co masz schrzanione ale v-if oczywiście że działa. https://vuejs.org/v2/guide/conditional.html

Nie dziala jezeli w v-ifie jest funkcja zwracajaca wartosc z serwisu.

bo ta metoda jest bez sensu, nawet w angularze takiego czegoś nie stosuje, metode w v-if, v-repeat itp stosuje jeśli przekazujesz do niej jakiś parametr, który się zmienia, wtedy wszystko działa idealnie.

Siłą rzeczy niemożliwe jest obserwowanie typów skalarnych; Vue rejestruje natomiast zmiany w obiektach poprzez injectowanie swoich własnych getterów oraz setterów, co powinno dać Ci już pole do popisu.

tl;dr Vuex.

mr_jaro napisał(a):

bo ta metoda jest bez sensu, nawet w angularze takiego czegoś nie stosuje, metode w v-if, v-repeat itp stosuje jeśli przekazujesz do niej jakiś parametr, który się zmienia, wtedy wszystko działa idealnie.

Oczywiscie ze ma sens i sie stosuje. Prosty przyklad. Masz serwis sterujacy wyswietleniem jakiegos okna. Okno ma byc wyswietlone jedynie gdy w serwisie pole displayed === true. Jakis inny komponent zmienia wartosc tego pola z false na true. Normalnie w angularze wystarczyloby zrobic ng-if="service.isDisplayed()". Pomijam juz ze mozna to zrobic na observable/eventach ale to powinno dzialac takze w vue. Jezeli nie, to nie wiem jak to mozna inaczej zrobic

zamiast metody użyć pola tego serwisu :)