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

我有一个元素，如果用户登录，它会有条件地以

v-if=“isLogged”

呈现：

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

---

将手表添加到

isloged

。当它处于活动状态时，获取您的

聊天

参考。您还必须检查您的

挂载

，因此将您的逻辑放在一个通用函数中

因此，在您的组件中：

val组件选项={
方法：{
checkDiv（）{
const chatDiv=此。$refs.chat
if（chatDiv）{
//你的代码在这里。。。
}
}
},
安装的（）{
this.checkDiv（）；
},
观察：{
isLogged（值）{
如果（值）{
this.checkDiv（）
}
}
}
}

--

---

您也可以使用

v-show

而不是

v-if

。这样，您的元素将被呈现但隐藏。

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

为了确保元素可用，我必须使用

if（newValue）{
此.$nextTick（函数（）{
this.chatHeight=this.$refs.chat.scrollHeight
})
}

---

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

您可以添加所有代码吗？我认为在v-if div创建一个

v-if-else

div并赋予它相同的

ref=“chat”

之后，无法在DOM中检查vue，因为它在虚拟DOM中。然后，在您的代码中，只需检查ref内容。更新了答案，我正在变量中设置

滚动高度

，因此我只需检查它是否定义了变量，然后使用它的值，对吗？@AlexanderKim将监视程序放在您的组件中，因此您可以将逻辑放在

监视程序中，而不是装入
中。如果您的
isLogged
在您的存储中，请使用计算属性来映射它，或者在组件中查看“$store.state.isLogged”（带引号）。我更新了答案，删除了
immediate
建议，因为immediate是在组件装载之前调用的。有关建议的结构，请参阅新代码段。这是一个很好的解决方案。这是正确的答案。更新dom后，您将能够使用ref。
this.$store.watch(
  (state) => {
    return this.$store.getters.isLogged
  },
  (newValue, oldValue) => {
    if (newValue) {
      this.chatHeight = this.$refs.chat.scrollHeight
    }
  }
)