在计算属性中使用$ refs

Question

如何在计算内访问$refs？第一次运行计算属性时，它始终未定义。

Answer 1

要回答我自己的问题，我无法在其他地方找到满意的答案。有时你只需要访问一个dom元素来进行一些计算。希望这对其他人有帮助。

我不得不欺骗Vue在组件装入后更新计算属性。

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

Answer 2

对于其他用户像我这样只需要通过一些数据来支撑，我用data代替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 3

如果需要$refs的v-if后，您可以使用updated()挂钩。

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


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