Vue错误记录:ajax get后数组与对象的转换

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;
        });
    }
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:马嘣嘣 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值