我如何從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]);

   }
}