0
我的代碼是這樣的：如何解決錯誤「未捕獲（承諾）TypeError：無法創建屬性」？ （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>
在執行時，在控制檯上存在的錯誤是這樣的：
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
我該如何解決呢？
請確保[訪問該承諾回調中正確的'this'/context]（http://stackoverflow.com/q/20279484/1048572） – Bergi
此外，它看起來像你要避免的['。然後（...，...）'反模式（http://stackoverflow.com/q/24662289/1048572），除非'//手柄error'應該只與HTTP錯誤專門處理 – Bergi
@Bergi，它已經工作。我使用這個：'this。$ set（this，'items'，response.data.data.data）; 這$組（這一點，「分頁」，response.data.pagination）;' –