在计算属性中使用$ refs

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

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

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

我只是遇到了同样的问题，并且意识到这种情况是计算属性无法正常工作的。

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

“ [...] 我们可以定义与方法相同的功能，而不是计算属性。对于最终结果，这两种方法确实完全相同。但是，不同之处在于，计算属性是基于它们的反应性进行缓存的计算属性只会在其某些反应性依赖项已更改时重新评估 “

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

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

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

如果需要，请使用属性绑定。：禁用的道具在这种情况下是反应性的

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

但是要检查两个字段，我发现没有其他方法可以用作虚拟方法：

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

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

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


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