vue爬坑一：JSON数据接收成功，页面渲染失败

前面一直使用豆瓣的API，所以一直没有遇到这样的问题。
我自己用PHP做了一个后端的API，问题就来了。
首先是json数据，直接查看API接口，数据是正常的。

但是在前端接收后，json数据接收的格式就不正常了。
一开始，页面渲染过程中，还有过数据一闪而过的情况。
当时我顿时懵逼。
我擦，从来没遇到过这种情况啊，一闪而过什么情况，完全无从下手啊，你说它没接收到，不是，你说它渲染失败，不完全是，但是之后我就从渲染下手，各种情况试了，连data里面数据的括号都给试了一遍，不行。
后来没办法，先放一边吧，请过朋友的指导后，把后端的格式毛病解决了。
正常情况json数据接收后请应该是这样：

可是我有问题的json是这样：

---

以下是正确代码：

前端html部分

<div class="indexContent" v-for="item in xin_body">
    <div class="indexContentTitle">
      <div>{{ item.article_id }}</div>
    </div>
</div>

前端JS部分

data() {
    return {
      xin_body:[],
      tranform: false
    }
},
created() {   
this.$http.get('http://localhost:9090/xin/index.php/Home/index/xinjson').then((success) => {
          // 请求成功，关闭loading
          this.tranform = false;
          // 由于请求成功返回的是Promise对象，我们要从success.body拿到数组
          this.xin_body = success.body;
        }, (error) => {
          console.log(error)
        })                                             
},

后端API部分

public function xinjson(){
    $data = M('article');
    $article = $data->select();
    // 指定允许其他域名访问
    header('Access-Control-Allow-Origin:*');
    // 响应类型
    header('Access-Control-Allow-Methods: GET,POST,PUT');
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
    header('Content-Type:application/json; charset=utf-8');
    //$json = json_encode($article);
    $this -> ajaxReturn($article, 'JSON');
    //echo $article;
}

在后端api里面添加了

header('Content-Type:application/json; charset=utf-8');

删去了

$json = json_encode($article);

前端没有改动.

感谢大兵同学拿出宝贵的时间帮我解决问题，话说刚结束不就就去陪女朋友了。（手动白眼）我乖乖的继续我的代码。
大兵同学的博客：http://geekhelp.cn/