在计算属性中使用$ refs

Question

我如何访问$refs内部计算？第一次运行计算属性时始终未定义.

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

Answer 2

如果您需要$refs后v-if可以使用updated() 钩子.

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


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

Answer 3

我刚刚遇到了同样的问题，并意识到这是计算属性不起作用的情况。

根据当前文档（https://vuejs.org/v2/guide/computed.html）：

“[...]我们可以定义与方法相同的函数，而不是计算属性。对于最终结果，这两种方法确实完全相同。但是，不同之处在于计算属性是基于它们的反应式缓存的依赖项。计算属性只会在它的一些响应式依赖项发生变化时重新评估“

因此，在这些情况下（可能）发生的是，完成组件的已安装生命周期并设置 refs 不算作对计算属性依赖项的反应性更改。

例如，在我的例子中，当我的参考表中没有选定的行时，我有一个需要禁用的按钮。因此，此代码将不起作用：

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

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

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

您可以做的是将计算属性替换为方法，这应该可以正常工作：

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

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

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

Answer 4

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

$ refs仅在呈现组件之后填充，并且它们是无反应的。它仅用作直接子操作的转义线-您应避免从模板或计算的属性中访问$ refs。

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