npm install やらなんやら。
わけわからんし、超面倒。
直接読み出そうぜ。
まずはルーティング。
・/api/test/ にアクセスしたらデータを取得。
・それ以外はすべて welcome.blade.php に来るようにする。
welcome.blade.php
<?php
Route::prefix('api')->group(function() {
Route::get('test','NikkiController@test');
});
Route::get('/{app}', function () {
\File::cleanDirectory(storage_path()."/framework/views/");//キャッシュがうざいので毎回削除する。本番ではこれを消す。
return view('welcome');
})->where('app', '.*');
?>
Http/Controllers/NikkiController.php
public function test()
{
$res = Nikki::query()
->select('id','title')
->get();
return $res;
}
welcom.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel-Vue-todo</title>
</head>
<body>
<div id="app">
<button @click="request">データ取得</button>
<ul >
<li v-for="item in items">@{{ item.title }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
items: [] //データ格納
},
methods: {
request: function(){ //←axios.getでデータを取得
axios.get('/api/test').then((res)=>{
console.log(res.data);
this.items = res.data //取得したデータをitemsに格納
})
.catch(error => console.log(error))
}
},
// created() { //最初にメソッドを実行
// this.request()
// },
});
</script>
</body>
</html>
たったこれだけでOK。