LaravelからVue側に渡したDBのレコードの平均値を表示したい
LaravelのControllerからDBに保存されたデータをVueのコンポーネントに渡しています。
データは商品に紐付けられたユーザー情報とカテゴリー、レビューの情報です。
ProductShow.vueのファイルでその情報を展開して表示しているのですが、「総合評価」という項目に渡ってきたデータの評価点(この商品のidとリレーションしたreviewesテーブルのpointというカラムの値の平均値)を表示したいと思っているのですが、なかなか実装出来ずに困っています。
下記にコードを記載してありますので、アドバイスいただけたらと思います。当サイト初心者ですのでもっと載せた方がいいコードなどありましたらご指摘ください。
web.php
Route::get('/products/{id}', 'ProductsController@show')->name('products.show');
ProductsController.php
// 商品詳細画面表示 public function show($id) { $product = Product::with(['user', 'category', 'reviews'])->find($id); return view('products.show', [ 'product' => $product, ]); }
show.blade.php
<div id="app"> <product-show :product="{{$product}}"></product-show> </div>
ProductShow.vue
<template> <div class="l-form p-form"> <div class="l-itemdetail p-itemdetail"> <div class="l-itemdetail__title p-itemdetail__title"> <h1>{{ product.title }}</h1> </div> <div class="l-itemdetail__img p-itemdetail__img"> <template v-if="(product.pic)"> <img :src="'/storage' + product.pic" alt=""/> </template> <template v-else> <img src="/images/product-noimg.png" alt="" /> </template> </div> <div class="l-btn-conteiner"> <button type="submit" class="p-btn btn-favorite"><i class="far fa-heart icon icon-heart"></i>気になる</button> </div> <table class="l-itemdetail__table p-itemdetail__table"> <tbody> <tr> <th>出品者</th> <td>{{ product.user.name }}</td> </tr> <tr> <th>カテゴリー</th> <td>{{ product.category.name }}</td> </tr> <tr> <th>概要</th> <td>{{ product.overview }}</td> </tr> <tr> <th>総合評価</th> <template v-for="review in product.reviews"> <td>{{ review }}</td> <!-- ここに平均点を表示したい --> </template> </tr> </tbody> </table> </div> </div> </template> <script> export default { props: { product: Object, }, mounted() { console.log('Component mounted.') } } </script>
Product.php
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Product extends Model { protected $fillable = [ 'pic','title', 'overview', 'category_id', 'contents', 'price', 'user_id', 'delete_flg', ]; public function category() { return $this->belongsTo('App\Category'); } public function reviews() { return $this->hasMany('App\Review'); } public function user() { return $this->belongsTo('App\User'); } }
Review.php
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Review extends Model { public function product() { return $this->belongsTo('App\Product'); } public function user() { return $this->belongsTo('App\User'); } }
User.php
<?php namespace App; use Illuminate\Notifications\Notifiable; use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Foundation\Auth\User as Authenticatable; class User extends Authenticatable { use Notifiable; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'pic', 'name', 'introduction', 'email', 'password', 'delete_flg', ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = [ 'password', 'remember_token', ]; /** * The attributes that should be cast to native types. * * @var array */ protected $casts = [ 'email_verified_at' => 'datetime', ]; public function reviews() { return $this->hasMany('App\Review'); } public function products() { return $this->hasMany('App\Product'); } }
回答1件
あなたの回答
tips
プレビュー