Reputation: 791
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
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!
Upvotes: 9
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
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
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