javascript - 使用laravel和vuejs从数据库获取数据

Question

我正在尝试使用 Laravel 和 Vue.js 从数据库中获取数据。 我得到的结果是没有。但 Firebug 控制台显示了响应。请找到所附图片。请检查我的代码并纠正我。

data.blade.php

@extends('layouts.app')

@section('title', 'Customers List')

@section('styles')
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">Customers List</div>
                    <div class="panel-body">
                        <table class="table table-hover table-bordered" id="app">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Reference ID</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php
                            $i=1;
                            ?>
                            <tr v-for="message in messages">
                                <td> {{ $i }} </td>
                                <td> @{{ message.name }} </td>
                                <td> @{{ message.reference_id }} </td>
                                <td><a href="/customers/list/process/" class="btn btn-primary btn-xs" role="button">Click Here</a></td>
                            </tr>
                            <?php $i++; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="/js/vue.js"></script>
    <script src="/js/vue-resource.min.js"></script>
    <script src="/js/customers.js"></script>
@endsection

customers.js

new Vue({
    el: '#app',

    ready: function() {
      this.fetchMessages();
    },

    methods: {
        fetchMessages: function() {
            this.$http.get('/customers/list/data', function(messages) {
                alert(messages);
                this.$set('messages', messages);
            });
        }
    }
});

Controller

public function showCustomersData()
    {
        $listCustomers             = Customer::select('id', 'name', 'reference_id')
            ->orderBy('id', 'desc')
            ->get();
        return response()->json(['messages' => $listCustomers]);
    }

路线

Route::get('/customers/list/data', [
        'as' => 'customerListData', 'uses' => 'CustomerController@showCustomersData'
    ]);

Answer 1

我已经编辑了 Controller 部分。现在我得到了结果。 将 return response()->json(['messages' => $listCustomers]) 替换为 return $listCustomers。

public function showCustomersData()
    {
        $listCustomers             = Customer::select('id', 'name', 'reference_id')
            ->orderBy('id', 'desc')
            ->get();
        return $listCustomers;
    }