Usando $ refs en una propiedad calculada

¿Cómo $refsaccedo al interior calculado? Siempre está indefinido la primera vez que se ejecuta la propiedad calculada.

Yendo a responder mi propia pregunta aquí, no pude encontrar una respuesta satisfactoria en ningún otro lugar. A veces, solo necesita acceder a un elemento dom para realizar algunos cálculos. Espero que esto sea útil para otros.

Tuve que engañar a Vue para que actualizara la propiedad calculada una vez que se montó el componente.

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

Creo que es importante citar la guía de Vue js :

Los $ refs solo se completan después de que se haya renderizado el componente y no son reactivos. Solo está pensado como una vía de escape para la manipulación directa de niños; debe evitar acceder a $ refs desde plantillas o propiedades calculadas.

Por lo tanto, no es algo que se supone que debas hacer, aunque siempre puedes hackearlo.

Si necesita el $refsdespués v-if, puede usar el updated() gancho.

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


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

Acabo de llegar con este mismo problema y me di cuenta de que este es el tipo de situación en la que las propiedades calculadas no funcionarán.

Según la documentación actual ( https://vuejs.org/v2/guide/computed.html ):

"[...] En lugar de una propiedad calculada, podemos definir la misma función como método. Para el resultado final, los dos enfoques son exactamente iguales. Sin embargo, la diferencia es que las propiedades calculadas se almacenan en caché en función de su dependencias. Una propiedad calculada solo se volverá a evaluar cuando algunas de sus dependencias reactivas hayan cambiado "

Entonces, lo que (probablemente) sucede en estas situaciones es que terminar el ciclo de vida montado del componente y configurar las referencias no cuenta como un cambio reactivo en las dependencias de la propiedad calculada.

Por ejemplo, en mi caso, tengo un botón que debe desactivarse cuando no hay una fila seleccionada en mi tabla de referencias. Entonces, este código no funcionará:

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

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

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

Lo que puede hacer es reemplazar la propiedad calculada por un método, y eso debería funcionar correctamente:

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

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

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

Para otros usuarios como yo que solo necesitan pasar algunos datos para prop, usé en datalugar decomputed

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

Utilice el enlace de propiedad si lo desea. : el accesorio desactivado es reactivo en este caso

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

Pero para verificar dos campos, no encontré otra forma como método ficticio:

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