Joshua
Joshua

Reputation: 791

Vue and Vue Resource

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.');
});

Upvotes: 16

Views: 3388

Answers (4)

AlloyTeamZy
AlloyTeamZy

Reputation: 159

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

Upvotes: 9

yassine chligui
yassine chligui

Reputation: 26

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

Upvotes: 0

Gus
Gus

Reputation: 4517

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.');
    });

Upvotes: 4

Douglas.Sesar
Douglas.Sesar

Reputation: 4420

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');

Upvotes: 17

Related Questions