Utilisation de $ refs dans une propriété calculée

Question

Comment accéder à $refs calculé à l'intérieur? Il est toujours indéfini la première fois que la propriété calculée est exécutée.

Answer 1

En répondant à ma propre question ici, je n’ai trouvé de réponse satisfaisante nulle part ailleurs. Parfois, il suffit d’avoir accès à un élément dom pour effectuer des calculs. Espérons que cela soit utile aux autres.

J'ai dû tromper Vue pour mettre à jour la propriété calculée une fois le composant monté.

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

Answer 2

Je pense qu'il est important de citer la Vue js guide:

$refs ne sont remplis après que le composant a été rendue, et ils ne sont pas réactifs. Il n'est là que comme une trappe d'évacuation directe de l'enfant de manipulation - vous devriez éviter d'accéder $refs de l'intérieur des modèles ou des propriétés calculées.

Il n'est donc pas quelque chose que vous êtes censé faire, mais vous pouvez toujours pirater votre chemin autour de lui.

Answer 3

Si vous avez besoin des $refs après un v-if vous pouvez utiliser le crochet updated() .

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


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

Answer 4

Pour les autres utilisateurs comme moi qui n'ont besoin que de transmettre certaines données à un accessoire, j'ai utilisé data au lieu de computed

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

Answer 5

Utilisez la liaison de propriété si vous le souhaitez. : prop désactivé est réactif dans ce cas

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

Mais pour vérifier deux champs, je n'ai trouvé aucun autre moyen comme méthode factice:

 <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;
   }
}