如何在 Vue 搜索组件中显示子嵌套数组 - Laravel

Question

我在通过我的 vue.js 搜索模板显示 eloquent 关系数据时遇到问题，特别是我的客户->账单字段。

models.student_first_name 会显示 models.billers.biller_first_name 不会显示任何内容

搜索功能正在我的 customers.index 视图中使用以下

CustomerDetailsController:

public function getData(Request $request){
    $search = $request->search;
    $customer = Customer::with('orders', 'billers', 'paymentplans', 'paidinfulls')->where(DB::raw('concat(student_first_name," ",student_last_name)'), 'like', '%'.$search.'%')->paginate(20);
    return response()->json([
        'model' => $customer
    ]);
}

/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index(Request $request)
{
    $customers = Customer::with('orders', 'paymentplans', 'billers')->orderBy('created_at', 'desc')->where('owner', Auth::user()->name)->paginate(25);
    return view('customers.index', compact('customers', 'orders', 'paymentplans', 'funding'));   
}

Customers.vue:

<template>
<div class="container">
        <div class="field m-b-20">
            <p class="control has-icons-left">
                <input @keyup="fetchDataCustomer()" type="text" class="form-control input" name="search" v-model="search" placeholder="Search">
                    <span class="icon is-small is-left"><i class="fa fa-search"></i></span>
            </p>
        </div>
    <table class="table">
        <thead>
        <tr>
            <th>Student Name</th>
            <th>Email</th>
            <th>Biller Name</th>
            <th>Biller Email</th>
            <th>Courses Purchased</th>
            <th>Deposit</th>
            <th>Payment Plan</th>
            <th>Accepted</th>
            <th>Receipted</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="models in model.data">
            <td>{{models.student_first_name}} {{models.student_last_name}}</td>
            <td>{{models.student_email}}</td>
            <td>{{models.billers.biller_first_name}}</td>
        </tr>

        </tbody>
    </table>
</div>
</template>


<script>
import axios from 'axios'

export default{
    data(){
        return {
            model: {},
            search:'',
            url:'api/customers'

        }

    },
    created:function (){
        this.fetchDataCustomer()
    },

    methods: {
        fetchDataCustomer(){
            var vm = this
            axios.get(`${this.url}?search=${this.search}`)
                .then(function (response) {
                    Vue.set(vm.$data, 'model', response.data.model)
                })


        }

    }

}

</script>

JSON输出一个搜索结果

{"model":{"current_page":1,"data":[{"id":"627d0130-4dd0-11e8-91dd-69869f509337","enrolment_id":"John","student_first_name":"John","student_last_name":"Smith","student_email":"johnsmith@mail.com","address":"123 Test Street","suburb":"Townsville","postcode":"9999","state":"AAA","home_phone":null,"work_phone":null,"mobile_phone":"0444444444","dob":"1999-01-01 00:00:00","drivers_license_number":"123738974987498","owner":"Sales Man","owner_email":"salesman@business.com","created_at":"2018-05-02 16:16:43","updated_at":"2018-05-02 16:16:43","orders":[{"id":933,"fc_account":16,"customer_id":"627d0130-4dd0-11e8-91dd-69869f509337","biller_id":246,"enrolment_id":"John","course_id":5,"delivery_mode":0,"course_cost":"2000.00","deposit":null,"gov_funding":"0","location":"0","Monday":0,"Tuesday":0,"Wednesday":0,"Thursday":0,"Friday":0,"Saturday":0,"Sunday":0,"start_time":null,"end_time":null,"start_date":null,"enrolment_issue_date":"2018-05-02","sale_type":2,"created_at":"2018-05-02 16:17:24","updated_at":"2018-05-02 16:17:24"}],"billers":[{"id":246,"customer_id":"627d0130-4dd0-11e8-91dd-69869f509337","biller_first_name":"John","biller_last_name":"Smith","biller_email":"johnsmith@mail.com","biller_address":null,"biller_suburb":null,"biller_postcode":null,"biller_state":null,"biller_phone":null,"created_at":"2018-05-02 16:17:24","updated_at":"2018-05-02 16:17:24"}],"paymentplans":[{"id":"836e7e40-4dd0-11e8-a907-83f96c25a7d0","enrolment_id":"John","customer_id":"627d0130-4dd0-11e8-91dd-69869f509337","paysmart_id":"FIT69869f509337","biller_id":246,"biller_first_name":"John","biller_last_name":"Smith","biller_email":"johnsmith@mail.com","payment_method":-1,"contract_value":"1500.00","interest_free":1,"payment_frequency":1,"commencement_date":"2018-05-24 00:00:00","payment":"100.00","first_payment":"200.00","admin_fee":"1.30","setup_fee":"5.50","deposit":"500.00","deposit_payment_method":"Cash","special_conditions":null,"accepted":null,"accepted_student":null,"created_at":"2018-05-02 16:17:38","updated_at":"2018-05-02 16:17:38","submitted":1,"biller_ip":null,"student_ip":null}],"paidinfulls":[]}]

Vue 调试

Answer 1

您的 models.billers 是一个数组，但您将其视为一个对象。因此，鉴于它始终可用，您必须通过 models.billers[0].biller_first_name 而不是 models.billers.biller_first_name 访问它。

如何在 Vue 搜索组件中显示子嵌套数组 - Laravel

How to display subnested arrays in Vue search component - Laravel

search

templates

live

laravel

vue.js