Vue.js無法使用querySelector查找元素

Question

我正在嘗試創建聊天樣式表單。因此，用戶輸入他們的數據，然後使用我的模板中的類別爲continue-btn的按鈕。

正如你所看到的，當按下continue-btn時，它使用nextStep方法，該方法將counter數據屬性加1。

在我的模板中，我使用v-if="counter >= 1"來顯示聊天對話框和輸入欄的下一部分。

我然後嘗試使用scrollTop自動滾動頁面到新的部分與ID爲#conversation__tram-1。我最初嘗試counter已獲得的值爲1剛過運行的代碼塊：

const container = this.$el.querySelector("#conversation__tram-" + this.counter); 
container.scrollTop = container.scrollHeight; 

這並沒有，但因爲我猜#conversation__tram-1元素工作沒有被添加到DOM還。

所以對於測試的緣故，我想在一個超時函數進行包裝：

setTimeout(function(){ 
    const container = this.$el.querySelector("#conversation__tram-" + this.counter); 
    container.scrollTop = container.scrollHeight; 
    }, 3000); 

不過我留下這個錯誤時，嘗試這樣的：

Uncaught TypeError: Cannot read property 'querySelector' of undefined 

這是我整單VUE文件：

<template> 

    <div id="conversation-app"> 
     <!-- <div v-for="item in items"> 
     {{ item.text }} 
     </div> --> 
     <div class="conversation__track"> 
     <div id="conversation__tram-0"> 
      <div class="conversation__item agent"> 
      <img src="/assets/cdn.annuityadvicecentre.dev/images/theme-f/michael-chat-agent.jpg" class="conversation__item-prof-img" alt="Michael Chat Agent" /> 
      <div class="conversation__item-content"> 
       <p> 
       Hello my name is {{ agent }}, we'll compare the whole annuity market to bring you back the best annuity rates from the top providers for you. Let's get started, what's your name? 
       </p> 
      </div> 
      </div> 
      <div class="conversation__item customer" id="title-fullname"> 
      <div class="conversation__item-content"> 
       <p> 
       Hi {{ agent }}, my name is... 
       </p> 
       <div class="row"> 
       <div class="col-4"> 
        <select id="title" class="field-title" name="payload[title]"><option value="mr">Mr</option><option value="mrs">Mrs</option><option value="miss">Miss</option><option value="ms">Ms</option></select> 
       </div> 
       <div class="col-8"> 
        <input v-model="customerName" id="full_name" class="field-full_name" name="payload[full_name]" type="text"> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     <transition name="fade"> 
      <div id="conversation__tram-1" v-if="counter >= 1"> 
      <div class="conversation__item agent"> 
       <img src="/assets/cdn.annuityadvicecentre.dev/images/theme-f/michael-chat-agent.jpg" class="conversation__item-prof-img" alt="Michael Chat Agent" /> 
       <div class="conversation__item-content"> 
       <p> 
        Thanks {{ firstName }}, nice to meet you. To process your instant quote please can I have your Pension Value? 
       </p> 
       </div> 
      </div> 
      <div class="conversation__item customer"> 
       <div class="conversation__item-content"> 
       <p> 
        Sure, my pension value is... 
       </p> 
       <input id="pension_value" class="field-pension_value" placeholder="£" pattern="\d*" name="payload[pension_value]" type="number"> 
       <div class="error-wrap error_pension_value is-hidden" data-format="<div class=&quot;error-text&quot;>:message</div>"></div> 
       </div> 
      </div> 
      </div> 
     </transition> 
     <div id="conversation__buttons"> 
      <button type="button" class="continue-btn" 
      v-on:click="nextStep" 
      >Continue&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i></button> 
     </div> 
     </div> 
    </div> 
</template> 

<script> 
export default { 
    name: 'conversation-app', 
    data() { 
    return { 
     agent: 'Brick', 
     counter: 0, 
     customerName: '', 
    } 
    }, 
    methods: { 
    nextStep: function() { 
     this.counter += 1; 
     setTimeout(function(){ 
     const container = this.$el.querySelector("#conversation__tram-" + this.counter); 
     container.scrollTop = container.scrollHeight; 
     }, 3000); 

    }, 
    }, 
    computed: { 
    firstName() { 
     return this.customerName.split(' ')[0]; 
    } 
    } 
} 
</script> 

任何想法，爲什麼這不工作？謝謝。

Answer 1

這是使用箭頭功能的好時機，因爲它們保留了this的上下文。

nextStep: function() { 
    this.counter += 1; 
    setTimeout(() => { 
    const container = this.$el.querySelector("#conversation__tram-" + this.counter); 
    container.scrollTop = container.scrollHeight; 
    }, 3000); 

Altenatively，而不是超時可以使用Vue.nextTick是這樣做的更多技術上正確的方法。

nextStep: function() { 
    this.counter += 1 
    this.$nextTick(() => { ... })