How i return data in Laravel from Vue.js Axios

Question

I have a textarea and I try to submit data with axios and vue to laravel but it doesn't work.I try to take the data and put ucfirst 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;


    }
}

just blank no error when i go to vue dev tools it just the areamodel: "" — Adrian Klark
– Adrian Klark, Commented Aug 13, 2017 at 6:06

curious_coder · Accepted Answer · 2017-08-13 06:56:21Z

3

The problem is that the instance of vue is not available inside the 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]);

   }
}

edited Aug 13, 2017 at 6:56

answered Aug 13, 2017 at 6:24

curious_coder

2,4784 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Adrian Klark Over a year ago

same, i think it has something in laravel

Adrian Klark Over a year ago

i put this return ['areamodel']; and now it work but it just areamodel back, i need the output of the areamodel

Adrian Klark Over a year ago

it returns [object Object]

curious_coder Over a year ago

Did you replace response.data with response.data.areamodel

curious_coder Over a year ago

it returns [object Object] right? So in console you can expand the object in network tab in dev tools. Can you try it and confirm if response is correct?

|

Collectives™ on Stack Overflow

How i return data in Laravel from Vue.js Axios

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related