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

Question

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

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

您在桌面上使用的ID不正确。在您的Vue对象中，您已将app定义为ID，但您的表的ID为demo。