Javascript “如何解决错误”；未捕获（承诺中）类型错误：无法创建属性“？（vue.js 2）_Javascript_Vue.js_Laravel 5.3_Vuejs2_Vue Component

Javascript “如何解决错误”；未捕获（承诺中）类型错误：无法创建属性“？（vue.js 2）

javascript vue.js vuejs2

Javascript “如何解决错误”；未捕获（承诺中）类型错误：无法创建属性“？（vue.js 2）,javascript,vue.js,laravel-5.3,vuejs2,vue-component,Javascript,Vue.js,Laravel 5.3,Vuejs2,Vue Component,我的代码如下： <!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="contai

我的代码如下：

<!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: []
        },
        mounted: 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) {
                    console.log(JSON.stringify(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>


拉维尔












新Vue({
el:“#应用程序”，
数据：{
分页：{
总数：0，
每页：7，
发信人:1,，
至:0,，
当前页面：1
},
偏移量：4，//从分页开始向左和向右填充，只需将其更改以查看效果
项目：[]
},
挂载：函数（）{
this.fetchItems（this.pagination.current_页面）；
},
计算：{
已激活：函数（）{
返回this.pagination.current_页面；
},
pagesNumber:函数（）{
如果（！this.pagination.to）{
返回[]；
}
var from=this.pagination.current_page-this.offset；
如果（从<1开始）{
from=1；
}
var to=from+（此偏移量为*2）；
如果（到>=此.pagination.last_页）{
to=this.pagination.last_page；
}
var pagesArray=[]；
而（从开始）尝试
因为根据错误响应是字符串而不是JSON。
存在错误：Uncaught（在promise中）SyntaxError:JSON中位置1处的意外标记o
请确保它看起来也像是您希望避免的标记，除非//handle error
应该只处理http错误specifically@Bergi，它已经在工作。我使用：this.$set（this'items'，response.data.data.data）；this.$set（这是“分页”，response.data.pagination）；
response = JSON.parse(response);