如何解决错误“未捕获(承诺)TypeError:无法创建属性" ? (vue.js 2) [英] How to solve error "Uncaught (in promise) TypeError: Cannot create property" ? (vue.js 2)
问题描述
我的代码是这样的:
<!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">«</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">»</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>
执行后，在控制台上存在如下错误:
When executed, on the console exist error like this :
未捕获(承诺)TypeError:无法创建属性'[object 对象]，[对象对象]，[对象对象]，[对象对象]，[对象 对象]，[对象对象]，[对象对象]'在字符串"items"上
Uncaught (in promise) TypeError: Cannot create property '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' on string 'items'
console.log(JSON.stringify(response))的结果是这样的:
http://www.jsoneditoronline.org/?id=3d1fca974d842cb080efe9117ec9b798
The result of console.log(JSON.stringify(response)) is like this :
http://www.jsoneditoronline.org/?id=3d1fca974d842cb080efe9117ec9b798
我该如何解决?
推荐答案
尝试
response = JSON.parse(response);
因为根据错误响应，字符串不是JSON.
Because according to error response is string not JSON.
这篇关于如何解决错误“未捕获(承诺)TypeError:无法创建属性" ? (vue.js 2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
