How do I return data in Laravel from Vue.js Axios

Advertisement

I have a text box and I try to submit data with axios and view to laravel but that does not work. I try to take the data and put it first and then return it.

 new Vue({ el:'#root', data:{ areamodel: '' }, methods:{ insert:function(){ axios.post('/vue').then(response => this.areamodel = response.data); } } }); 

and

 namespace App\Http\Controllers; use Illuminate\Http\Request; class PostController extends Controller { public function vue(Request $request) { $abc = ucfirst($request->input('areamodel')); return $abc; } } 

The answer

The problem is that the view instance is not available in axios.

 new Vue({ el:'#root', data:{ areamodel: '' }, methods:{ insert:function(){ let vueInstance = this; //This line is important axios.post('/vue', {areamodel: vueInstance.areamodel}).then( function(response){ vueInstance.areamodel = response.data.areamodel; } ).catch(function(error){ console.log(error.message); }); } } }); 

And server side

 namespace App\Http\Controllers; use Illuminate\Http\Request; class PostController extends Controller { public function vue(Request $request) { $abc = ucfirst($request->input('areamodel')); return response()->json(['areamodel' => $abc]); } } 

Related articles

List of data using laravel and vue.js

2016-03-29

I'm trying to list some data in a laravel page but the result is not filled. Could you please check and correct me? I do not know if I am right or not. Currently, vue.js is added to the Laravel blade model. list.blade.php @extends('layouts.app') @sec

Sending data to Laravel using Axios & Vue

2017-04-29

I followed the tutorial of Stripe integration by Laracasts and it became obvious to me that much has changed since Laravel 5.4 was released. I could still find my way but I hit a bump by trying to submit a payment form using Vue and Axios. The produc

Obtain Angular's form data from Laravel

2014-03-19

I have some problems posting data from my Angular application (before) to my larvar backend (using $ resource and factory). Here is my controller who gets form data and sends it to my factory: myApp.controller('EventCtrl', function ($scope, $http, Ev

Return data for npm google-distance

2017-08-10

I can see the data in the log but I can not get it out of the function. var distance = require('google-distance'); distance.get( { index: 1, origin: '37.772886,-122.423771', destination: '37.871601,-122.269104' }, function(err, data) { if (err) retur

Node.js request function return data

2017-07-17

I have had questions about returning data from a node request JS request. A common error is to assume that statements are executed line by line or synchronous, which is not the case here. A question of this type: how to get data from a query of type

Return data from jQuery promise object

2013-03-10

I use $.getJSON() and try to return data using different flavors of the code below: var changeUserPage = function (id) { return repository.getUserPage(id).done(function (data) { // console.log(data) }) } var changeUserPage = var changeUserPage = func