Używanie $ refs w obliczonej właściwości

Jak uzyskać dostęp do $refswewnątrz obliczonego? Jest to zawsze niezdefiniowane przy pierwszym uruchomieniu obliczonej właściwości.

Odpowiadając tutaj na własne pytanie, nigdzie indziej nie mogłem znaleźć satysfakcjonującej odpowiedzi. Czasami wystarczy mieć dostęp do elementu dom, aby wykonać obliczenia. Mam nadzieję, że jest to pomocne dla innych.

Musiałem oszukać Vue, aby zaktualizował obliczoną właściwość po zamontowaniu komponentu.

Vue.component('my-component', {
    data(){
        return {
            isMounted: false
        }
    },
    computed:{
        property(){
            if(!this.isMounted)
                return;
            // this.$refs is available
        }
    },
    mounted(){
        this.isMounted = true;
    }
})

Myślę, że warto zacytować przewodnik po Vue js :

$ ref są wypełniane dopiero po wyrenderowaniu komponentu i nie są reaktywne. Jest pomyślane tylko jako kreska ucieczki do bezpośredniej manipulacji podrzędnymi - należy unikać uzyskiwania dostępu do $ refs z poziomu szablonów lub obliczonych właściwości.

Dlatego nie jest to coś, co powinieneś robić, chociaż zawsze możesz to obejść.

Jeśli potrzebujesz $refspo, v-ifmożesz użyć updated() haka.

<div v-if="myProp"></div>


updated() {
    if (!this.myProp) return;
    /// this.$refs is available
},

Właśnie przyszedłem z tym samym problemem i zdałem sobie sprawę, że jest to sytuacja, w której obliczone właściwości nie będą działać.

Zgodnie z aktualną dokumentacją ( https://vuejs.org/v2/guide/computed.html ):

„[…] Zamiast obliczonej właściwości możemy zdefiniować tę samą funkcję jako metodę. W przypadku końcowego wyniku oba podejścia są rzeczywiście dokładnie takie same. Różnica polega jednak na tym, że obliczone właściwości są buforowane na podstawie ich reaktywnej zależności. Obliczona właściwość zostanie ponownie oszacowana tylko wtedy, gdy niektóre z jej reaktywnych zależności ulegną zmianie ”

Tak więc (prawdopodobnie) zdarza się w takich sytuacjach, że zakończenie zamontowanego cyklu życia komponentu i ustawienie referencji nie jest liczone jako reaktywna zmiana w zależnościach obliczonej właściwości.

Na przykład w moim przypadku mam przycisk, który należy wyłączyć, gdy w mojej tabeli referencyjnej nie ma wybranego wiersza. Tak więc ten kod nie zadziała:

<button :disabled="!anySelected">Test</button>

computed: {
    anySelected () {
      if (!this.$refs.table) return false

      return this.$refs.table.selected.length > 0
    }
}

To, co możesz zrobić, to zamienić obliczoną właściwość na metodę, która powinna działać poprawnie:

<button :disabled="!anySelected()">Test</button>

methods: {
    anySelected () {
      if (!this.$refs.table) return false

      return this.$refs.table.selected.length > 0
    }
}

Dla innych użytkowników, takich jak ja, którzy muszą po prostu przekazać niektóre dane do prop, użyłem datazamiastcomputed

Vue.component('my-component', {
    data(){
        return {
            myProp: null
        }
    },    
    mounted(){
        this.myProp= 'hello'    
        //$refs is available              
        // this.myProp is reactive, bind will work to property
    }
})

Jeśli chcesz, użyj powiązania właściwości. : wyłączona prop jest reaktywna w tym przypadku

<button :disabled="$refs.email ? $refs.email.$v.$invalid : true">Login</button>

Ale żeby sprawdzić dwa pola, nie znalazłem innego sposobu niż metoda fikcyjna:

<button
    :disabled="$refs.password ? checkIsValid($refs.email.$v.$invalid, $refs.password.$v.$invalid) : true">
            {{data.submitButton.value}}
</button>

methods: {
   checkIsValid(email, password) {
      return email || password;
   }
}