Data Laravel Ke Vue

vue nya digunakan untuk apa gan? hanya untuk data binding atau memang untuk bangun single page app?

1. Kalau hanya untuk digunakan data binding: - Bila kita lakukan prosess passing data seperti pada umumnya di laravel yaitu controller->view. kita bisa tetap binding data namun hanya one way data binding. Example: *CONTROLLER

$user = 'Budi';
return view('tampilan')->with(compact('user'));

*VIEW (tampilan.blade.php)

<h1 id="user">{{ $user }}</h1>

=> sampai sini proses passing data laravel yang biasa kita lakukan

*VUE

new Vue({
   data: {
     user: $('#user').text()
   }
})

masalahnya kalau dilakukan seperti ini, data user pada Vue tidak reactive alias hanya one way data binding. Sehingga bila kita coba rubah value dari user tersebut misalnya menjadi 'Budi diedit' maka value dari <h1> tidak akan berubah. Oklah kita punya option agar datanya bisa 2 way data binding dengan mempuat sebuah hidden input dan sedikit perubahan pada VIEW dan data VUE namun saya rasa ini nanti agak complicated ketika data dari backend sudah cukup banyak.

2. Dipergunakan sebagai SPA Pastinya ini akan jauh lebih mudah karena memang vue dibangun untuk tujuan ini. Proses2 request di database kita lakukan melalui ajax pada method maupun lifecycle hooks yang telah disedikan. Example: *ROUTE

Route::get('/home', 'ExampleController@home');
Route::post('/login', 'ExampleController@login');

*CONTROLLER

public funtion home()
{
   return view('tampilan');
}

public function login(Request $request)
{
   // misalnya kita lakukan authentification user
   // untuk sementar sy coba dengan data statis sj
   if ($request->user === 'Budi') return response()->json(['user'=>'Budi'], 200);
}

*VIEW (tampilan.blade.php)

<div id="app">
   <h1>Nama anda: @{{ user }}</h1>
   <button @click="login">Login</button>
</div>

*VUE

new Vue({
   el: '#app',
   data: {
     user: 'Tidak dikenali'
   },
   methods: {
     login() {
       // disini sy gunakan axios, sama seperti $.ajax atau vue-resource
       // Kita akan lakukan post ke backend dan dapatkan data user
       // parameter yang dipassing ke backend { user: 'Budi' }
       // hasil yang didapatkan kemudian, kita update value dari user (yang awalnya 'Tidak dikenali') menjadi 'Budi'
       Axios.post('/login', { user: 'Budi' }).then((response) => this.user = response.data.user)
     }
   }
})

>_< panjang juga. Intinya untuk laravel dan vue dalam hal SPA laravel yang return 1 view saja yang nantinya akan dijadikan route oleh VUE. adapun pengelolaan data dari backend dan view lebih baik dihandle oleh VUE.