Laravelから受け取ったデータをVueで非同期で更新する。
はじめに
LaravelからVueにデータを渡すときのメモを大まかに書いておきます。
環境
Laravel 8.33.1
vue: 2.5.17
api.phpに書くのが正しいのかweb.phpに書くのがいいのかわからないのですが、どちらでも動く、違いといえばapi/をつけるかどうかくらいにしか理解できていないです。。
web.php
Route::get('/', [ProductController::class,'index']);
Route::get('/Products', [ProductController::class,'getProducts']);
テーブル
$table->id();
$table->string('name');
$table->string('description');
$table->timestamps();
Resourceをつくって必要なデータだけを取り出します。
php artisan make:resource ProductResource
Resourceを書き換え。timestampsは必要ないので取り除いてる。
public function toArray($request)
{
return [
'id' => $this->id,
'name' => $this->word,
'description' => $this->description,
];
//デフォルト↓
// return parent::toArray($request);
}
ProductController
//useを追加
use App\Models\Product;
use App\Http\Resources\ProductResource;
//viewを返す
public function index()
{
return view('index');
}
//Vueにデータを渡す
public function getProducts()
{
return ProductResource::collection(Product::all());
}
View。appで囲む。script を忘れずに書く
<div id="app">
<product-page/>
</div>
<script src="{{ asset('js/app.js') }}"></script>
Laravelからのデータをaxiosで受け取る。受け取ったデータを空の配列のproductsに入れる。for文で回す
<template>
<div >
<p v-for="product in products" :key='product.id'>
{{ product.name}}
{{ product.description}}
</p>
</div>
</template>
<script>
export default {
data: function () {
return {
products: [],
};
},
mounted() {
this.loadEnglishWord();
},
methods: {
//Laravelからのデータをaxiosで受け取る
loadProducts: function () {
axios
.get("/products")
.then((response) => {
// console.log( response)
this.products= response.data.data;
})
.catch(function (error) {
console.log(error);
});
},
},
};
</script>
Author And Source
この問題について(Laravelから受け取ったデータをVueで非同期で更新する。), 我々は、より多くの情報をここで見つけました https://qiita.com/xiaomi05/items/504200919ae70fd26793著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .