Vueメソッドスクロールdiv to top

Question

私はvueを学んでいます。私はid="toolbar-chat"とdivにチャットメッセージを追加する以下の方法があります。このdivはy軸のスクロールを許可し、新しいメッセージが追加されるたびにdivが先頭にジャンプするようにします。私のJSはなぜ機能しないのですか？

document.getElementById("toolbar-chat").scrollTop = 0; 

マイvue方法：

methods: { 
     addMessage(message) { 
      this.messages.unshift(message); 

      document.getElementById("toolbar-chat").scrollTop = 0; 

      axios.post(chat_send_route, message) 
      .then(response => { 
       console.log(response.data); 
      }); 

     } 
    } 

Answer 1

これはVUEは非同期のDOMを更新方法が原因起こっています。私はあなたのtoolbar-chat要素にref属性を追加し、this.$refsを使用して、あなたの方法でそれを参照するお勧めの変更を反映するためにReacivity in depth(Async update Queue)

• はすぐdocument.getElementById()を使用してDOM要素を照会するのではなく、vm.$nextTick(callback)

• を使用して参照してください。だから方法は

  methods: { 
      addMessage(message) { 
       this.messages.unshift(message); 
       this.$nextTick(() => { 
        this.$refs.toolbarChat.scrollTop = 0; 
       }); 
  
       axios.post(chat_send_route, message) 
       .then(response => { 
        console.log(response.data); 
       }); 
  
      } 
  } 
  

  でなければなりませんref属性

  <div id="toolbar-chat" ref="toolbarChat"></div> 
  

の詳細についてはdocsを参照してくださいここで働いてfiddle

です