Question

我从这里开始：https://github.com/JellyBool/laravel-vue-pagination

然后，我克隆它，然后尝试我的localhost

但是，执行后，在浏览器中没有显示任何内容

我在\resources\views\welcome.blade.php上编辑代码，如下所示：

 <!DOCTYPE html>
    <html>
    <head>
        <title>Laravel</title>
        <link rel="stylesheet"
              href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
        <div class="col-md-8 col-md-offset-2">
            <div id="app">
                <ul class="list-group">
                    <li class="list-group-item" v-for="item in items">
                        <a href="/item/@{{ item.id }}">
                            @{{ item.title }}
                        </a>
                    </li>
                </ul>
                <nav>
                    <ul class="pagination">
                        <li v-if="pagination.current_page > 1">
                            <a href="#" aria-label="Previous"
                               @click.prevent="changePage(pagination.current_page - 1)">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-for="page in pagesNumber"
                            v-bind:class="[ page == isActived ? 'active' : '']">
                            <a href="#"
                               @click.prevent="changePage(page)">@{{ page }}</a>
                        </li>
                        <li v-if="pagination.current_page < pagination.last_page">
                            <a href="#" aria-label="Next"
                               @click.prevent="changePage(pagination.current_page + 1)">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.0/vue-resource.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                pagination: {
                    total: 0,
                    per_page: 7,
                    from: 1,
                    to: 0,
                    current_page: 1
                },
                offset: 4,// left and right padding from the pagination <span>,just change it to see effects
                items: []
            },
            ready: function () {
                this.fetchItems(this.pagination.current_page);
            },
            computed: {
                isActived: function () {
                    return this.pagination.current_page;
                },
                pagesNumber: function () {
                    if (!this.pagination.to) {
                        return [];
                    }
                    var from = this.pagination.current_page - this.offset;
                    if (from < 1) {
                        from = 1;
                    }
                    var to = from + (this.offset * 2);
                    if (to >= this.pagination.last_page) {
                        to = this.pagination.last_page;
                    }
                    var pagesArray = [];
                    while (from <= to) {
                        pagesArray.push(from);
                        from++;
                    }

                    return pagesArray;
                }
            },
            methods: {
                fetchItems: function (page) {
                    var data = {page: page};
                    this.$http.get('api/items', data).then(function (response) {
                        //look into the routes file and format your response
                        this.$set('items', response.data.data.data);
                        this.$set('pagination', response.data.pagination);
                    }, function (error) {
                        // handle error
                    });
                },
                changePage: function (page) {
                    this.pagination.current_page = page;
                    this.fetchItems(page);
                }
            }
        });
    </script>
    </body>
    </html>

我该如何解决？

Answer 1

这些文件在哪里？您需要在当前目录（视图文件夹内）中创建js文件夹，然后从Internet获取vue和vue-resource.min脚本。复制它们并保存在文件中。或者您可以只包含这些脚本的链接。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

为什么在浏览器中没有显示任何内容？（vue.js 2）

1 个答案:

为什么在浏览器中没有显示任何内容？ （vue.js 2）

1 个答案:

为什么在浏览器中没有显示任何内容？（vue.js 2）