在计算属性中使用 $refs

Question

如何访问 $refs 内部计算？第一次运行计算属性时它总是未定义。

原文由 Eric Guan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

打算在这里回答我自己的问题，我在其他任何地方都找不到满意的答案。有时您只需要访问 dom 元素即可进行一些计算。希望这对其他人有帮助。

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

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

原文由 Eric Guan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为引用 Vue js 指南 很重要：

\(refs 仅在组件被渲染后才被填充，并且它们不是响应式的。它仅作为直接子操作的逃生舱口 - 您应该避免从模板或计算属性中访问 \)refs。

因此，这不是您应该做的事情，尽管您总是可以绕过它。

原文由 Geoffroy 发布，翻译遵循 CC BY-SA 4.0 许可协议