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;


    }
}

Answer 1

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

   }
}