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

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

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

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

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

Answer 2

将手表添加到isLogged。启用后，请获取您的chat参考。您还必须检查mounted，因此将您的逻辑放在一个通用函数中。

因此在您的组件中：

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

-

您也可以使用v-show代替v-if。这样，您的元素将被呈现但隐藏。

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

2 个答案: