current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

i want to post ajax request using vue-resource this.$http.post request. it worked perfectly fine if i passed all validation rules but i want to get some validations if it fails. so far i keep getting 500 error if i don't fill out some input fields. it's hard for me to debug the error because it didn't appeared on the network tab.

here's what i've done so far

//my modal component
<script>
export default {
    props: ['show'],

    data() {
        return {
            input: {
                id: '',
                name: '',
                address: '',
                email: ''
            },
            errorInputs: {}
        }
    },

    methods: {
        createStudent() {
            this.$http.post('/students', this.$data.input)
                .then((response) => {
               alert('added new row!)
            }, (response) => {
                console.log(response.data);
            });
        }
      }
   }
</script>

// my controller

public function store(Request $request) {
    $validator = $this->validate($request,[
        'id' => 'required',
        'name' => 'required|unique:students',
        'email' => 'required|unique:students|email',
        'address' => 'required',
    ]);

    if($validator->passes()){
        Student::create($request->all());

        return response()->json([], 201);
    }

    $errors = json_decode($validator->errors());

    return response()->json([
        'success' => false,
        'message' => $errors
    ],422);
}

any helps and references would be appreciated. i am using laravel 5.3 and vue js 2

share|improve this question
    
Maybe you have filters enabled on your network tab? Check if it's all (or xhr at least) marked on your tab. It'll help for sure. You can also check for logs in storage/log/laravel.log – Skysplit Nov 13 at 0:10
    
yeah i realize that after posting my question, sorry. could you help me how to pass laravel validation into vue js component? i am stucked at this point. – ishadif Nov 13 at 0:24
    
What's the problem then? So far you're heading in good direction as far as I can see – Skysplit Nov 13 at 0:27
    
i can't pass laravel validations data to vue component when validation fails. i want to display them in my template. i know laravel will send json response for ajax request but i can't get those data – ishadif Nov 13 at 0:39
up vote 0 down vote accepted

$this->validate() returns 422 error response alongside your validation errors, so you should get those errors in then() second callback (like you do now). Your vue component body should be like this:

{
    data() {
        // ...
    },
    createStudent() {
        this.$http
            .post('/students', this.input)
            .then(this.handleSuccess, this.handleError)
    },
    handleSuccess(res) {
        alert('student created')
    },
    handleError(res) {
        if (res.status === 422) {
            this.errorInputs = res.body
        } else {
            alert('Unkown error!')
        }
    }
}

Remember to add v-model="input.fieldName" properties to your inputs.

share|improve this answer
    
thank you but i still get 500 somehow. there's something wrong on my laravel code i think. i'll comeback to you later – ishadif Nov 13 at 1:15
    
apparently i have changed render function on handler.php to throw exception before this code return parent::render($request, $exception);. that's why I keep getting 500 error. validation in vue side works properly now – ishadif Nov 13 at 1:51
    
@ishadif Geat to hear that! Hopefully my answer helped you at least a little bit :) – Skysplit Nov 13 at 1:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.