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]); } }