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

Answer 1

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

Answer 2

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