vue请问这个报错是为什么,数据都已经渲染出来了

image.png


<div class="p-s-i l" v-for="item in product.productItems">
    <img class="icon" src="../images/home_icon_zt.png">
    <img src="../images/product_bg_cam.png">
    <p>{{item.title}}</p>
    <span>{{item.description}}</span>
</div>

var product = new Vue({
    el: '#app-product',
    data: {
        product: null,
    },
    methods: {
        imgFormatter(val) {
            return IMGPATH + val
        },
        getProductData() {
            let this_ = this
            $.ajax({
                success: function success(res) {
                    console.log(res);//已打印,结构和上图一样
                    this_.product = res.data
                }
            });
        }
})

一直报错
image.png

阅读 273
评论
    8 个回答
    • 42

    因为data中的product初始为null,null.productItems 肯定会报错的

    data: {
            product: null,
        },

    改为

    data: {
            product: {},
        },

    即可

      product 初始值 null
      在接口完成前 页面渲染 product.productItems 肯定报错呀

          代码没有贴全
          在获取到数据前页面模板已经渲染了。
          试试在created生命周期里获取数据。

            • 19k

            加段保护代码

            <div v-if="product===null">
                数据正在加载...
            </div>
            <div class="p-s-i l" v-for="item in product.productItems" v-if="product!==null">
                <img class="icon" src="../images/home_icon_zt.png">
                <img src="../images/product_bg_cam.png">
                <p>{{item.title}}</p>
                <span>{{item.description}}</span>
            </div>

              因为在请求到数据之前,渲染模板就开始执行了,此时对象数据是null,所以vue中product.productItems的取值就会抛出异常

                • 160

                从提供的信息建议给 product 初始化

                data() {
                    return {
                        product: {
                             productItems: []
                        }
                    };
                }
                  • 171

                  同步和异步的问题

                    撰写回答

                    登录后参与交流、获取后续更新提醒

                    相似问题
                    推荐文章