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

虽然报错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>

回答:

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

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

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

回答:

见图片:
图片描述

放在计算属性里面:
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>

回答:

加个v-if判断一下

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

回答:

图片描述

回答:

你两个page3_a节点

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注