Vue and Vue Resource

Question

I'm trying to send a post request via vue-resource and I can't quite seem to figure out what I'm doing incorrectly.

I'm using Laravel 5.1 to process the request.

The following jquery code works fine from within my Vue method.

 $.ajax({
        type: 'POST',
        url: '/purchase/save-cart-items',
        data: { 'purchaseItems' : purchaseItems},
        success: function (response) {
            if(response == "ok") {
                alert("Cart saved successfully.");   
            } else {
                alert('There was a problem saving this cart. Please try again.');
            }
        }
    });

However, the replacing the jquery above with the following vue-resource post request doesn't work for some reason. I'm sure it's something simple, but I can't seem to figure it out. Vue-resource is properly included in the project as I'm using it for get requests without issue.

this.$http.post('/purchase/save-cart-items', {purchaseItems:purchaseItems}, function (data, status, request) {
    alert("Cart saved successfully.");
}).error(function (data, status, request) {
    alert('There was a problem saving this cart. Please try again.');
});

What does your browser console say when the call goes out? Use Chrome's web inspector's network panel to inspect the request and response. — ceejayoz
– ceejayoz, Commented Dec 16, 2015 at 22:03

Douglas.Sesar · Accepted Answer · 2015-12-17 02:58:46Z

17

You may be missing the csrf token:

html

<meta id="token" name="token" content="{{ csrf_token() }}">

js

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

answered Dec 17, 2015 at 2:58

Douglas.Sesar

4,4705 gold badges31 silver badges38 bronze badges

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

3 Comments

Joshua Over a year ago

Thank you - that was the error. I forgot about that because I had my jquery properly set up with $(document).ready(function(){ $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); }); So the jquery worked. However, that doesn't attach itself to the vue-resource request.

XCS Over a year ago

Is csrf_token Lavarel related?

Douglas.Sesar Over a year ago

yes, it is defined in laravel/framework/src/Illuminate/Foundation/helpers.php

AlloyTeamZy · Accepted Answer · 2017-06-08 09:58:10Z

9

Vue's author has stopped updating and maintaining vue-resource. He himself also suggested using axios, axios more easy to use and easy to maintain. axios introduction

If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!

Github Demo

answered Jun 8, 2017 at 9:58

AlloyTeamZy

1591 silver badge3 bronze badges

Comments

Gus · Accepted Answer · 2015-12-17 14:54:45Z

4

The code should be:

this.$http.post('/purchase/save-cart-items', {purchaseItems:purchaseItems})
    .success(function (data, status, request) {
        alert("Cart saved successfully.");
    })
    .error(function (data, status, request) {
        alert('There was a problem saving this cart. Please try again.');
    });

edited Dec 17, 2015 at 14:54

answered Dec 17, 2015 at 13:01

Gus

4,5272 gold badges26 silver badges27 bronze badges

2 Comments

Joshua Over a year ago

Thanks for the answer but that code isn't formatted correctly.

Gus Over a year ago

You're right, I edited my post with the correct code.

yassine chligui · Accepted Answer · 2016-05-03 09:59:57Z

0

The code should be:

 this.$http.post('purchase/save-cart-items', {purchaseItems:purchaseItems})
        .success(function (data, status, request) {
            alert("Cart saved successfully.");
        })
        .error(function (data, status, request) {
            alert('There was a problem saving this cart. Please try again.');
        });

or try with tymon/jwt-auth packages

answered May 3, 2016 at 9:59

yassine chligui

263 bronze badges

Collectives™ on Stack Overflow

Vue and Vue Resource

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related