使用 laravel 和 vue.js 的数据列表

Question

我试图在 laravel 页面中列出一些数据，但结果没有被填充。你能检查并纠正我吗？我不知道我是否正确地遵循了这一点。目前，vue.js 已添加到 laravel blade 模板中。

list.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="demo">
                            <thead>
                            <tr>

                                <th>Name</th>
                                <th>Age</th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="people in peoples">
                                <td> @{{ people.name }} </td>
                                <td> @{{ people.age }} </td>
                            </tr>
                            <pre> @{{ $data | json }} </pre>
                            </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>
        new Vue({
            el: '#app',
            data: {
                peoples: [
                    { name: 'John', age: 50 },
                    { name: 'Smith', age: 20 },
                    { name: 'Foo', age: 30 },
                    { name: 'Joo', age: 60 }
                ]
            }
        });
    </script>
@endsection

Answer 1

您在 table 上使用的 ID 不正确。在您的 Vue 对象中，您已将 app 定义为 ID，但您的 table 具有 ID demo.

使用 laravel 和 vue.js 的数据列表

Data listing using laravel and vue.js

laravel

vue.js