如何访问在 v-if 中有条件呈现的 ref 元素 - Vue

Question

v-if="isLogged"如果用户登录，我有一个有条件地呈现的元素：

<div
  v-if="isLogged"
  class="chatBlock"
  ref="chat"
></div>

我试图chat在mounted ()函数中获取引用的滚动高度- this.$refs.logged.scrollHeight，但这是不可能的，因为如果用户未登录，则这div不会在安装阶段呈现，因此即使用户登录 -它不会工作，因为安装的阶段已经过去了。

是否可以使用watch方法跟踪 DOM 中的元素外观？

更新

添加了观察者，正如史蒂文在下面建议的那样mounted ()：

this.$store.watch(
  (state) => {
    return this.$store.getters.isLogged
  },
  (newValue, oldValue) => {
    if (newValue) {
      this.chatHeight = this.$refs.chat.scrollHeight
    }
  }
)

Answer 1

添加手表到isLogged. 当它处于活动状态时，请获取您的chat参考。您还必须检查您的mounted，因此将您的逻辑放在一个通用函数中。

\n\n

所以在你的组件中：

\n\n\n\n

val componentOptions = {\n  methods: {\n    checkDiv() {\n      const chatDiv = this.$refs.chat\n      if (chatDiv) {\n        // your code here...\n      }\n    }\n  },\n  mounted() {\n    this.checkDiv();\n  },\n  watch: {\n    isLogged(value) {\n      if (value) {\n        this.checkDiv()\n      }\n    }\n  }\n}\n

\n\n\n\n

\xe2\x80\x94-

\n\n

您也可以使用v-show代替v-if. 这样你的元素将被渲染但隐藏。

\n

Answer 2

接受的答案对我不起作用。手表不保证元素已经被渲染。

为了确保元素可用，我不得不使用$nextTick

 if (newValue) {   
     this.$nextTick(function () {
         this.chatHeight = this.$refs.chat.scrollHeight
    })
}

这将导致代码在下一个 DOM 更新周期后执行。