Как отображать вложенные массивы в поисковом компоненте Vue - Laravel

У меня возникают проблемы с отображением красноречивых данных о взаимоотношениях с помощью моего шаблона поиска vue.js, в частности, в полях моего клиента-> выставителя счета.

models.student_first_name будет отображаться, однако models.billers.biller_first_name ничего не показывает

Функция поиска работает с представлением my 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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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 DebugКак отображать вложенные массивы в поисковом компоненте Vue - Laravel

проверьте, находится ли biller_first_name в массиве $hidden в модели Biller, если да, удалите его

Hussein 02.05.2018 08:37

@hussein, где бы мне провести проверку, не могли бы вы уточнить?

Dexx 02.05.2018 10:36

он там, как говорится в выводе json

Hussein 02.05.2018 11:56
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
1
3
230
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш models.billers - это массив, но вы рассматриваете его как объект. Таким образом, вам придется получить к нему доступ через models.billers[0].biller_first_name вместо models.billers.biller_first_name, учитывая, что он всегда доступен.

Я попытался добавить [0], но все равно не смог вернуть значение. Еще раз протестирую.

Dexx 02.05.2018 10:34

Это сработало после npm run watch и очистки данных браузера

Dexx 03.05.2018 00:53

Другие вопросы по теме