0
Mein Code ist wie folgt:So lösen Sie Fehler "Uncaught (in Versprechung) TypeError: Kann Eigenschaft nicht erstellen"? (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>
Wenn er ausgeführt wird, auf der Konsole vorhanden sind Fehler wie folgt aus:
Uncaught (in promise) TypeError: Cannot create property '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' on string 'items'
Das Ergebnis console.log(JSON.stringify(response)) ist wie folgt: http://www.jsoneditoronline.org/?id=3d1fca974d842cb080efe9117ec9b798
Wie kann ich es lösen?
Stellen Sie sicher, [greifen Sie auf das richtige 'this/context in diesem Versprechen Rückruf] (http://stackoverflow.com/q/20279484/1048572) – Bergi
Es sieht auch so aus, als ob Sie die [' vermeiden möchten. dann (..., ...) 'antipattern] (http://stackoverflow.com/q/24662289/1048572), es sei denn,' // handle error' soll nur HTTP-Fehler behandeln, speziell – Bergi
@Bergi, es funktioniert bereits. Ich benutze dies: 'this. $ Set (this, 'items', response.data.data.data); dies. $ Set (this, 'pagination', response.data.pagination); ' –