vue 点击使滚动条滚动到底部的方法(聊天面板发送信息滚动到最底部)

<div class="middle"  >
  <div v-for="(item,index) in answerList" :key="index"> 
    <div class="items" v-if="item.status==1" style="color:#FFB128">
      <span class="user_name" >{{item.user_name}}：</span>
      <span class="answer">{{item.answer}}</span>
     </div>
     <div class="items" v-else>
      <span class="user_name" style="color:#51B6FC" >{{item.user_name}}：</span>
      <span style="color:#fff;" class="answer">{{item.answer}}</span>
    </div>
  </div>
</div>

最近做了一个聊天面板，想要实现点击发送的时候自动滚动到最新消息

点击发送按钮的时候执行该函数，在有滚动条的div设置ref 为 middle

toEnd(){//滚动到底部
    this.$nextTick(() => {
     let middle= this.$refs["middle"];
     middle.scrollTop = middle.scrollHeight;
   })
},