Vue访问本地json时会出现TypeError: Cannot read property '0' of undefined

Question

虽然报错TypeError: Cannot read property '0' of undefined，
但是数据资料都有正常显示出来，只是想明白什么原因报错，麻烦各位大神了。

JSON部份

{
    "page3_a":[
        {
            "title":[
                {"title":"tt"},
                {"title":"ta"},
                {"title":"tb"},
                {"title":"tc"}
            ]
        }
    ],
    "page3_a":[
        {
            "title":[
                {"title":"tt"},
                {"title":"ta"},
                {"title":"tb"},
                {"title":"tc"}
            ]
        }
    ],
    "page3_c":[
        {
            "title":[
                {"title":"tt"},
                {"title":"ta"},
                {"title":"tb"},
                {"title":"tc"}
            ]
        }
    ],
}

Vue部份

var app=new Vue({
    el:"app",
    data:{
        page3:[]
    },
    created:function(){
        var _this=this;
        $.ajax({
            url:'page3.json',
            type:'GET',
            dataType:'json',
            success:function(res){
                _this.page3=res;
            }
        })
    }
})

Html部份

<div id="app">
    <div v-for="v in page3.page3_a[0].title">
        <span>{{v.title}}</span>
    </div>
    <div v-for="v in page3.page3_b[0].title">
        <span>{{v.title}}</span>
    </div>
    <div v-for="v in page3.page3_c[0].title">
        <span>{{v.title}}</span>
    </div>
</div>

Answer 1

在JSON请求回来的时候已经渲染页面了，此时你给的page3的默认值是[]，所以page3.page3_a是undefined，你再使用[0]当然就会报错了，你需要在初始化data的时候，把需要的结构都初始化，代码如下：

data: function() {
    return {
        page3: {
            page3_a: [{
                title: []
            }]
        }
    }
}

这样在数据没有回来的时候访问page3.page3_a[0].title才不会报错。

Answer 2

见图片：

放在计算属性里面：
computed:{

page3Data(){

    var _this=this;
    $.ajax({
        url:url.urlpath,
        type:'GET',
        dataType:'json',
        success:function(res){
            _this.page3=res.page3_a[0].title;
        }
    });
    return  _this.page3;
  } 

}

<ul v-for='(item,index) in page3Data'>

  <li>{{item.title}}</li>

</ul>

按你所说还需要page3_b,page3_c,
在method中写一个带有参数的函数：
method:{
page3Data(val){

var _this=this;
$.ajax({
    url:url.urlpath,
    type:'GET',
    dataType:'json',
    success:function(res){
      // console.log("00000000000",res['page3_b']);
         _this.page3=res[val][0].title;
    }
});

}
}

在mounted中：
mounted(){

 var _this=this;
_this.$nextTick(function(){
    _this.page3Data('page3_a');
  });

},

<ul v-for='(item,index) in page3'>

  <li>{{item.title}}</li>
  </ul>

Answer 3

加个v-if判断一下

v-if ="page3.page3_a" v-for="v in page3.page3_a[0].title"

Answer 4

Answer 5

你两个page3_a节点

Answer 6

三目运算符 看对象外的数组是不是存在 完美解决