如何從Vue.js返回Laravel中的數據Axios

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

    } 
}