Question

我有下面的数据库表

MEMBER TABLE
id (PK)
member_name
family_id (FK)

FAMILY TABLE
id (PK)
family_name

我使用Laravel和Vue JS

我成功从Laravel中获取数据，使用Vue在浏览器上显示

我得到的结果，MEMBER TABLE看起来像这样

会员表

===================================
id     member_name       family
===================================
1      John              1
2      Robby             1
3      Bruce             2
4      Megan             3
5      Lily              3

如何显示family列包含取自FAMILY TABLE

的family_name（字段）的成员

我的意思是，如何将上面的MEMBER TABLE转换成如下表所示

================================
id     member_name       family
================================
1      John              Doe
2      Robby             Doe
3      Bruce             Lee
4      Megan             Fox
5      Lily              Fox

守则：

Member.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

use App\Helper\DataTableViewer;

class Member extends Model
{

    use DataTableViewer; 

    protected $fillable = ['member_name', 'family_id'];

    public static $columns = ['id', 'member_name', 'family_id', 'created_at', 'updated_at'];

    public function family(){
        return $this->belongsTo('App\Family');
    }
}

MemberController.php

<?php

namespace App\Http\Controllers;

use App\Family;
use App\Member;
use App\Repository\SearchRepository;
use Illuminate\Http\Request;
use Illuminate\Session\save;
use Illuminate\Support\Facades\Input;

class MemberController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {

        return view('member.main');

    }

    public function getData(){
        $model = Member::DynamicTable();
        $columns = Member::$columns;

        return response()->json([
            'model' => $model,
            'columns' => $columns,
        ]);
    }
.....
.....
.....

助手/ DataTableViewer.php

?php 

namespace App\Helper; 

trait DataTableViewer{

    public function scopeDynamicTable($query){

        return $query->paginate(10);

    }
}

VUE CODE

<template>
	
	<div>
		<table class="table is-striped">
			<thead>
				<tr>
					<th v-for="column in columns" class="is-uppercase">
						<span>{{ column }}</span>
						<abbr v-if="column === query.column">
							<span v-if="query.direction === 'desc'">&darr;</span>
							<span v-else>&uarr;</span>
						</abbr>
					</th>
				</tr>
			</thead>

			<tbody>
				<tr v-for="row in model.data">
					<td v-for="(value,key) in row">
						{{ value }}
					</td>
				</tr>
			</tbody>
		</table>
	</div>

</template>

<script>
	import Vue from 'vue'
	import axios from 'axios'

	export default{
		props: ['source', 'title'],
		data() {
			return {
				model : {},
				columns : {},
				query : {
					column : 'id',
					direction : 'desc',
					page : 1
				}
			}
		}, 
		created(){
			this.fetchIndexData()
		},
		methods : {
			fetchIndexData(){
				var vm = this

				axios.get(this.source).then(function(response){
					Vue.set(vm.$data, 'model', response.data.model)
					Vue.set(vm.$data, 'columns', response.data.columns)
				}).catch(function(response){
					console.log(response)
				})

		
			}
		}
	}
</script>

@extends('layouts.app')

@section('content')

<div class="container">
	<div class="columns">
		<div class="column m-t-50">
			<div class="card">
				{{-- @include('member.search') --}}

				<header class="card-header">
					<p class="card-header-title">Daftar Jemaat Yang Ber-FA</p>
				</header>

				<div class="card-content">
					<div class="field">
						<a href="{{ route('member.create') }}" class="button is-success is-fullwidth">DAFTAR BARU</a>
					</div>
				</div>
				

				<div class="card-content">
					<div class="content">
						<table class="table is-narrow is-fullwidth">
						
        					<data-viewer source="/api/member" title="testing" />
                  
						</table>
					</div>
				</div>

				<div class="card-footer">
				
					<span>TODO : Pagination</span>		
			
			 	</div>
			</div>
		</div>
	</div>
</div>


@endsection

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

你需要急切加载你的关系。

[entryPoints]
  [entryPoints.http]
     address = ":80"
     [entryPoints.http.redirect]
     regex = "^http://(.*)"
     replacement = "https://$1"

https://laravel.com/docs/5.5/eloquent-relationships#eager-loading

更新

要显示单个属性，请使用点表示法来访问它们，如：

Member::with('family')->dynamicTable();

Answer 2

另一种方法仍然是使用laravel控制器或模型

中的EagerLoad

with('family')

我们将获得嵌套的JSON数据

过滤仅在表格中根据需要显示的字段只需使用。（点）来引用嵌套的Object名称在我的情况下，就像下面的代码

DataViewer.vue

<tbody>
    <tr v-for="row in model.data">
        <td>{{ row.member_name }}</td>
        <td>{{ row.family.family_name }}</td>
    </tr>
</tbody>

Answer 3

好的，在阅读了Laravel，Vuejs和axios文档之后，我意识到我不需要更改或添加任何Vue和axios代码来过滤要显示的字段

因此，添加它的代码不在Vue或Axios中，但在Laravel中使用查询构建器，只需加入并为我需要显示的字段添加特定查询，因为Vue Js和Axios只是拉动来自laravel db的整个数据，所以我认为是一个更好的方法来改进laravel查询中的字段

我在特质DataTableViewer.php

中进行查询

trait DataTableViewer {

public function scopeDynamicTable($query){

    return $query->join('families', 'members.id', '=', 'families.id')
            ->select('member_name', 'family_name')
            ->paginate(10);
}

首先，我根据每个表ID加入带有Families表的Members表，然后我选择，只选择我要在Vue表中显示的特定字段，并将每页10个数据分页

就这么简单，感谢@alanfcm和@btl的线索

如何在VUE JS创建的表中显示id所引用的名称？

3 个答案: