使用Vue發送郵件後，我的textarea輸入不爲空

Question

我正在使用laravel和Vue。我創建了一個Messenger應用程序。一切都完成了。但我面臨一個問題。也就是說，在按下輸入按鈕之後，消息將發送給所需的人。但是，在我刷新頁面之前，輸入字段中的消息仍然可用。 這是我的html的代碼。

<input type="hidden" v-model="conID"> 
<textarea class="col-md-12 form-control" v-model="msgFrom" @keydown="inputHandler" 
style="margin-top: 15px;border: none; resize: none;"></textarea> 

這是我的Vue代碼。

inputHandler(e){ 
     if(e.keyCode === 13 && !e.shiftkey){ 
      e.preventDefault(); 
      this.sendMsg(); 
     } 
    }, 
    sendMsg() 
    { 
     if(this.msgFrom){ 
      axios.post('http://localhost:8000/sendMessage',{ 
       conID:this.conID, 
       msg:this.msgFrom 
      }) 
    .then(function(response){ 
     console.log(response.data); 

     if(response.status===200){ 
      app.singleMsgs = response.data; 
     } 
    }) 
    .catch(function (error){ 
     console.log(error); 
    }); 
     } 

任何人都可以請幫助我。發送郵件後，我怎麼才能讓textarea變空。 提前致謝。

Answer 1

應儘可能清除它一旦消息被髮送

明確的形式一樣容易：this.msgFrom =「」，因爲你一個承諾函數中做這件事（和無箭功能），您需要存儲this範圍並通過它;通常使用完成var self = this

例如：

inputHandler(e) { 
    if (e.keyCode === 13 && !e.shiftkey) { 
     e.preventDefault(); 
     this.sendMsg(); 
    } 
    }, 
    sendMsg() { 
    var self = this; // <--- store scope 'this' 
    if (this.msgFrom) { 
     axios.post('http://localhost:8000/sendMessage', { 
      conID: this.conID, 
      msg: this.msgFrom 
     }) 
     .then(function(response) { 
      console.log(response.data); 

      if (response.status === 200) { 
      app.singleMsgs = response.data; 
      self.msgFrom = ''; // <--- and then clear form 
      } 
     }) 
     .catch(function(error) { 
      console.log(error); 
     }); 
    } 
    }