私のテキストエリアの入力は、Vueを使ってメッセージを送信した後に空ではありません

Question

laravelとVueを使用しています。私はメッセンジャーアプリケーションを作成しました。すべてが行われます。しかし、私は問題に直面しています。つまり、Enterボタンを押すと、メッセージが目的の人物に送られます。しかし、私はページをリフレッシュするまで、入力フィールドにメッセージが表示されます。 私の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); 
    }); 
     } 

誰も私を助けてください。メッセージを送信した後にテキストエリアを空にする方法 ありがとうございます。

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