显示来自 api VueJS 的数据

Question

我正在使用 axios 从 api 获取数据，当我console.log(app.books)我可以看到我的数据时，它不会显示在页面上。我正在使用 v-for 在表上显示数据。 我很困惑我的代码出了什么问题？

<tbody>
<tr v-for="book in books" class="text-center">
<td> {{ book.id }} </td>
<td><a href="#"> {{ book.name }} </a></td>
<td> {{ book.author }} </td>
<td> ${{ book.price}} </td>
<td>
<a href="#" class="text-success" @click="showEditModal=true">
<i class="fas fa-edit"></i> 
</a>
</td>
<td>
<a href="#" class="text-danger" @click="showDeleteModal=true">
<i class="fas fa-trash"></i>  
</a>
</td>
</tr>
</tbody>
export default {
name: "App",
data: function() {
return {
successMsg: false,
errorMsg: false,
showAddModal: false,
showEditModal: false,
showDeleteModal: false,
books: [],
newBook: {name: "", author: "", price: ""},
currentBook: {}
}
},
mounted: function(){
this.getAllBooks();
},
methods: {
getAllBooks: function(){
axios.get('http://localhost/crud-vuejs/src/Backend/api.php?action=read')
.then(function(res) {
if(res.data.error){
app.errorMsg = res.data.message;
}
else{
app.books = res.data.books;
}
console.log(app.books);
});
}
}
}

响应有效负载：

{"books":[{"id":"1","name":"Harry Potter","author":"J. K. Rowling","price":"40"},{"id":"2","name":"The great gastby","author":"Scott Fitzgerald","price":"36"},{"id":"3","name":"To Kill a Mockingbird","author":"Harper Lee","price":"26"}]}

Answer 1

您应该将app替换为this

export default {
name: "App",
data: function() {
return {
successMsg: false,
errorMsg: false,
showAddModal: false,
showEditModal: false,
showDeleteModal: false,
books: [],
newBook: {name: "", author: "", price: ""},
currentBook: {}
}
},
mounted: function(){
this.getAllBooks();
},
methods: {
getAllBooks: function(){
axios.get('http://localhost/crud-vuejs/src/Backend/api.php?action=read')
.then((res) => {
if(res.data.error){
this.errorMsg = res.data.message;
}
else{
this.books = res.data.books;
}
console.log(this.books);
});
}
}
}