api接口:
[{"comment_nums":2242816,"rank_year":2016,"rank":2,"url":"http://product.dangdang.com/23464478.html","book_name":"东野圭吾:解忧杂货店","author":"东野圭吾","publisher":"南海出版公司","price":39.5,"publish_time":"2014-05-01","recommend_percent":99.9,"front_image_path":"full/fe7db4bfb42c97a19b901cefea40142d19119217.jpg"}]
这里我希望get后把数据存在book
对象中,以{{book.book_name}}
输出书名。
错误代码:
<template>
<div class="app-container">
{{book.book_name}}
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
book: {}
};
},
created() {
this.fetchDataById()
},
methods: {
fetchDataById() {
var that = this;
this.axios
.get("http://127.0.0.1:8000/api/xxxxx").then(res => {
that.book = res.data;
console.log(that.book);
}).catch(error => {
console.log(error);
this.dialogError = true;
});
}
}
};
</script>
错误分析:
我一直以为api里传进来的只是一本书,必然是个对象,但没注意外面有个中括号! TAT
api里返回的是一个只有一个对象元素的数组。赋值语句that.book = res.data
执行后的book是数组。故无法通过{{book.book_name}}
输出数组中某一元素的书名。
法1:
通过循环数组输出:(虽然这个数组只有一个元素)
<template>
<div class="app-container">
<div v-for="item in book" :key="item">
<p>{{item.book_name}}</p>
</div>
</div>
</template>
法2:
js是弱类型,因此get后直接把数组第一个元素提出来赋值即可。
fetchDataById() {
var that = this;
this.axios
.get("http://127.0.0.1:8000/api/xxxxx").then(res => {
that.book = res.data[0];
console.log(that.book);
}).catch(error => {
console.log(error);
this.dialogError = true;
});
}