我如何从Vue.js Axios返回Laravel中的数据

Question

我有一个textarea，我尝试使用axios和vue向laravel提交数据，但是它不起作用。我尝试将数据放入ucfirst，然后将其返回。

new Vue({
el:'#root',
data:{

  areamodel: ''
},

methods:{
 insert:function(){
     axios.post('/vue').then(response => this.areamodel = response.data);
   }

}

});

和

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

问题是vue实例在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); });
   }
}

});

和服务器端

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

   }
}