CODEWITHSUNDEEP
laravel-5vuejs2
Fokrule
Fokrule

Reputation: 854

My textarea input is not be empty after send message using Vue

I am using laravel and Vue. I have created a messenger application. Everything is done. But I am facing a problem. That is, after press enter button, message goes to the desired person. But the message still be available in the input filed until I refresh the page. Here is my html code.

<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>

Here is my Vue code. 

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

Can anyone please help me. Just how I can make textarea empty after sending a message. Thank's in advance.

Upvotes: 0

Views: 800

Answers (1)

Daniel
Daniel

Reputation: 35714

should be as easy as clearing it once the message is sent

clear the form with: this.msgFrom = '', because you're doing it within a promise function (and without an arrow function), you need to store the this scope and pass it; usually done using var self = this

example:

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

Upvotes: 1

Related Questions