2017-02-22 8 views
2

Только что начал с vuejs с Laravel, я пытаюсь сделать почтовый запрос с помощью axios http-клиентской библиотеки. Запросы отлично работают, но я не могу отображать сообщения об ошибках в html-файле.Vuejs: сообщения об ошибке проверки ajax не отображаются

Вот HTML-файлу

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

       }); 
      } 

     } 
    } 

Однако response.data.errors возвращает сообщения об ошибках, но я не могу в состоянии отобразить в HTML-страницы.

ответ

1

сфера это не правильно, вместо того, чтобы использовать функции стрелок, которые не связывают свою собственную сферу:

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

     }); 
    } 
+0

ее не работает – Jabaa

+0

woked, когда я изменить к this.error = response.data.errors – Jabaa

+0

Еще один вопрос: как я могу показать шаблон сообщения об успехе/ошибке после запроса ajax – Jabaa