使用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); 
     }); 
    } 
    }