Question

我在laravel中使用vue js创建了一个简单的实时聊天应用程序。当有新数据时，我遇到了div自动滚动的问题。我想要的是当有新数据时div自动向下滚动到div的底部。

到目前为止，这是我的代码。

Chat.vue文件

<template>
  <div class="panel-block">
    <div class="chat" v-if="chats.length != 0" style="height: 400px;" id="myDiv">
      <div v-for="chat in chats" style="overflow: auto;" >
        <div class="chat-right" v-if="chat.user_id == userid">
          {{ chat.chat }}
        </div>
        <div class="chat-left" v-else>

          {{ chat.chat}}
        </div>
      </div>

    </div>
    <div v-else class="no-message">
      <br><br><br><br><br>
      There are no messages
    </div>
    <chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid"></chat-composer>
  </div>
</template>

<script>
  export default {
    props: ['chats','userid','adminid'],   
  }
</script>

ChatComposer.vue文件

<template>

  <div class="panel-block field">
    <div class="input-group">
      <input type="text" class="form-control" v-on:keyup.enter="sendChat" v-model="chat">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button" v-on:click="sendChat">Send Chat</button>
      </span>
    </div>
  </div>

</template>

<script>
export default{
  props: ['chats','userid','adminid'],
  data() {
    return{
      chat: ''
    }
  },
  methods: {

    sendChat: function(e) {
      if(this.chat != ''){
        var data = {
          chat: this.chat,
          admin_id: this.adminid,
          user_id: this.userid
        }

        this.chat = ''; 

        axios.post('/chat/sendChat', data).then((response) => { 
          this.chats.push(data)
        })

        this.scrollToEnd();

      }
    },
    scrollToEnd: function() {       
      var container = this.$el.querySelector("#myDiv");
      container.scrollTop = container.scrollHeight;
    }

  }
}   

</script>

我将Chat.vue文件中的div id传递给ChatComposer.vue文件。

正如您在ChatComposer.vue文件中看到的那样，有一个名为scrollToEnd的函数，其中包含来自Chat.vue文件的div id的高度。

当触发sendchat函数时，我调用了scrollToEnd函数。

我猜他没有从div id中获取值，因为我收到错误 - 无法读取null的属性'scrollHeight'。

任何帮助将不胜感激。

提前致谢。

Answer 1

this.$el.querySelector的范围仅限于ChatComposer.vue，因此子组件无法访问父组件#myDiv的div。

您可以在ChatComposer中触发如下事件

this.$emit('scroll');

在父组件中编写ScollToEnd方法并使用$ ref指定新的高度

<chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid" @scroll="ScollToEnd"></chat-composer>

...

将Div id传递给laravel中的另一个vue组件

1 个答案: