Vuejs :ajax validation error messages not displaying

Question

Just started with vuejs with Laravel , i am trying to make post request with axios http client library. Requests works fine but i can't able to display error messages in html file.

Here is the html file

<form @submit.prevent="addJob" >

  <input type="text" v-model="user.name" >
  <textarea v-model="user.message"></textarea>
  <button >Submit</button>
  //for showing errors
  <span v-if="error">{{error}} </span>
  </form>

Js

export default {

        data:function(){
           return {
              test:'hello',
              more:[
                      { message: 'Foo' },
                      { message: 'Bar' }
                   ],
              origin:'',
              user:{},
              error:''
           }
        },
        methods:{
          addJob:function(e){
             axios.post('/test',this.user)
               .then(function (response) {
                 //set the error message
                 this.$set('error',response.data.errors);
                 //this will returns nothing
                 console.log(error);
               })
               .catch(function (error) {

               });
          }

        }
    }

However the response.data.errors returns the error messages but i can't able to display in html page.

Saurabh · Accepted Answer · 2017-02-22 06:49:07Z

1

scope of this is not correct, instead use arrow functions, which don't bind their own scope:

  addJob:function(e){
     axios.post('/test',this.user)
       .then(response => {
         this.$set('error',response.data.errors);
       })
       .catch(function (error) {

       });
  }

answered Feb 22, 2017 at 6:49

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jabaa Over a year ago

woked when i change to this.error=response.data.errors

Jabaa Over a year ago

One more question how can i show success/error message template after ajax request

Collectives™ on Stack Overflow

Vuejs :ajax validation error messages not displaying

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related