Question

刚开始使用Laravel的vuejs，我正在尝试使用axios http客户端库发布帖子请求。请求工作正常，但我无法在html文件中显示错误消息。

这是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页面中显示。

Answer 1

这个范围不正确，而是使用箭头函数，它们不绑定自己的范围：

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

       });
  }

Vuejs：ajax验证错误消息未显示

1 个答案: