Vue页面在加载时不会向下滚动

Question

我在尝试使页面在加载时向下滚动到最新消息时遇到了困难。当一个人发送新消息并且页面将在发送时直接向下滚动到最新消息时，我具有相同的功能。 我尝试了一些方法，例如scrollIntoView，甚至将scrollTop设置为9999。但是，当我控制台记录scrollTop时，它仍然指示它为0。在创建消息加载后调用该函数。 任何人都可以帮助我为什么它不工作？非常感谢您的帮助，谢谢。

<v-container>
  <div id="top-nav">
    <v-avatar id="avatar">
      <img src="../../public/img/icons/myavatar.png" alt="avatar">
    </v-avatar>
    <div id="title-grp">
      <h3 id="sofia-title">Sofia</h3>
      <div id="online-grp">
        <span id="online-circle"></span>
        <p id="online-text">Online</p>
      </div>
    </div>
  </div>
  <div id="msg-container">
    <v-row dense>
      <v-col cols="12">
        <v-card
          style="width: fit-content"
          v-for="(message,index) in messages"
          :key="index"
          :style="{'margin-left': message.isRobot ? '' : 'auto'}"
          :color="message.isRobot? '#F5F3FF' :'#C66BCC'" 
          id="convo-space"
        >
          <p id="timestamp" :style="{'color': message.isRobot? '#808080' : '#000000'}">{{message.timestamp}}</p>
          <v-card-text
            :style="{'color': message.isRobot ? 'black' : 'white', 'font-size': '16px'}"
          >
            {{message.text}}
          </v-card-text>

        </v-card>
        <div id="bottom-scroll" ref="last-message"></div>   
      </v-col>
    </v-row>
  </div>    

  <div id="bottom-container">
    <div class="col-text">
      <input type="text" placeholder="Type here" id="text-input" v-model="userMessage">
    </div>
    <div class="col-btn">
      <button @click="sendMessage" id="btn-color-text"> Send </button>
    </div>
  </div>
</v-container>
        

</template>

<script>

  import {config} from "../config.js"
  const token = config.dialogflow.clientBot;

  import { ApiAiClient } from 'api-ai-javascript';
  const client = new ApiAiClient({accessToken: token});

  import { mapGetters } from "vuex";

  import firebase from "firebase";

  export default {
    data: () => ({
      messages: [],
      userMessage: "", 
    }),
    methods: {
      sendMessage(){
        var timestamp = new Date().toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'});
        const usrMessage = {
          text: this.userMessage,
          isRobot: false,
          timestamp: timestamp
        };

        this.messages.push(usrMessage);

        client.textRequest(this.userMessage).then((response) => {
          const robotMessage = {
            text: response.result.fulfillment.speech,
            isRobot: true,
            timestamp: timestamp
          };

          firebase
          .firestore()
          .collection("users")
          .doc(firebase.auth().currentUser.uid)
          .collection("messages")
          .add({
            userMessage: usrMessage.text,
            robotMessage: robotMessage.text,
            timestamp: timestamp 
          });

          const delay = ms => new Promise(res => setTimeout(res,ms));

          const pushMsg = async () => {
            let randNum = Math.floor(Math.random() * 8000);
            await delay(randNum);
            await this.messages.push(robotMessage);
            this.scrollToEnd();
          };

          pushMsg();
          this.scrollToEnd();
        });
          


        this.userMessage = "";
        console.log(firebase.auth().currentUser.uid);
      },
      scrollToEnd(){
        var container = this.$el.querySelector('#msg-container');
        container.scrollTop = container.scrollHeight;
        console.log(container.scrollHeight);
        console.log(container.scrollTop);
      }
    },

    created(){
      var oldMessages = [];

      firebase
      .firestore()
      .collection("users")
      .doc(firebase.auth().currentUser.uid)
      .collection("messages")
      .get()
      .then( (querySnapshot) => {
        querySnapshot.forEach(function(doc){
          var snapMsg = doc.data();
          let robot = {
            text: snapMsg.robotMessage,
            timestamp: snapMsg.timestamp,
            isRobot: true
          }

          let human = {
            text: snapMsg.userMessage,
            timestamp: snapMsg.timestamp,
            isRobot: false
          }
          
          oldMessages.unshift(human, robot);
          });
          this.messages = oldMessages;
          });
    },
    mounted(){
      var bottomDiv = this.$el.querySelector('#bottom-scroll');
      bottomDiv.scrollIntoView();
      console.log(bottomDiv);
      console.log(bottomDiv.scrollIntoView());

      // var bottomDiv = this.$el.querySelector('#msg-container');
      // bottomDiv.scrollTop = 9999;      
      // console.log(bottomDiv.scrollTop);

      navigator.serviceWorker.addEventListener('message', (e) => {
        console.log('Push Notification received');
        console.log(e.data.firebaseMessagingData.notification.body);
        var timestamp = new Date().toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'});
        const robotMessage = {
          text: e.data.firebaseMessagingData.notification.body,
          isRobot: true,
          timestamp: timestamp
        }
        firebase
        .firestore()
        .collection("users")
        .doc(firebase.auth().currentUser.uid)
        .collection("messages")
        .add({
          robotMessage: robotMessage.text,
          timestamp: robotMessage.timestamp
        });

        this.messages.push(robotMessage);
      });
    },
    computed: {
      ...mapGetters({
        user: "user"
      })
    }
  }
</script> ```

Answer 1

当数据已更新而 DOM 尚未更新时，您正在尝试更新 UI。使用 nextTick 更新 Dom/Ui 时调用 scrollToEnd，每当 DOM 更新时调用 vue nextTick

例如你的代码

const pushMsg = async () => {
        let randNum = Math.floor(Math.random() * 8000);
        await delay(randNum);
        await this.messages.push(robotMessage);
        this.scrollToEnd();
      };

应该是

 let self= this;
 const pushMsg = async () => {
        let randNum = Math.floor(Math.random() * 8000);
        await delay(randNum);
        await this.messages.push(robotMessage);
  self.$nextTick(function(){
   this.scrollToEnd();
  })
        
      };