时间戳

首页 > 解决方案 > document.getElementById 在 Vue2 组件中未定义......因为滥用手表？

html - document.getElementById 在 Vue2 组件中未定义......因为滥用手表？

问题描述

我正在制作一个基本的聊天组件，它将消息从 firebase 加载到 div 中。

relevantMessages我试图通过添加一个调用'scrollToBottom'`方法的观察者来做到这一点。

问题是：观察者“relevantMessages”的回调错误：

“TypeError：无法读取未定义的属性‘scrollTop’”

HTML：

<template>
  <div class="all">
    <div class="chat-header">
      ...
    </div>
    <div class="messages-area" id="messages-area-id" ref="messagesAreaRef">
      <div
        v-for="(thing, index) in relevantMessages"
        :key="index"
        class="message-row"
      >
        <div class="message">
          <span>{{thing.content}}</span>
          <span>{{thing.timeStamp}}</span>
        </div>
      </div>
    </div>
    <div class="input-area">
      ...
  </div>
</template>

JS：

<script>
import firebase from "firebase";
export default {
  data() {
    return {
      relevantMessages: Object,
      partnerObj: null
    };
  },
  computed: {
    ...
  },
  props: {
    ...
  },
  mounted: function() {
    this.getMessages();
    this.getPartner();
  },
  watch: {
    relevantMessages: function() {
      this.scrollToBottom();
    }
  },
  methods: {
    getMessages: function() {
      var that = this;
      firebase
        .database()
        .ref("/messages/" + that.conversationUID)
        .on("value", function(messages) {
          var result = messages.val();
          that.relevantMessages = result;
        });

      console.log("getting posts");
    },
    sendMessage: function() {
      ...
    },
    scrollToBottom: function() {
      var messagesArea = this.$refs.messagesAreaRef;
      // var messagesArea = document.getElementById("messages-area-id");

      var currentScrollPos = messagesArea.scrollTop;
      // console.log(currentScrollPos);
      var totalDivHeight = messagesArea.scrollHeight;
      if (currentScrollPos <= totalDivHeight - 100) {
        messagesArea.scrollTop(totalDivHeight);
      }
    }
  }
};

错误本身：

  • vue.runtime.esm.js?2b0e:619 [Vue 警告]：观察者“relevantMessages”的回调错误：“TypeError：无法读取未定义的属性‘scrollTop’”

  • TypeError：无法读取未定义的属性“scrollTop”

标签： htmlvue.jsvuejs2

解决方案

可能此时组件本身尚未安装。所以$refs都是undefined。在mounted(). _ _ 希望有帮助！

推荐阅读