v-for 无法遍历数据，不执行循环

最新推荐文章于 2025-07-06 22:51:21 发布

飞鸿小子

最新推荐文章于 2025-07-06 22:51:21 发布

阅读量8.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： VUE v-for 新手向

本文链接：https://blog.youkuaiyun.com/weixin_42291381/article/details/81664492

本文介绍了一种在Vue.js中由于函数名与数组变量名重复导致的数据无法正确渲染的问题及解决方案。通过更改数组变量名，成功解决了页面空白、数据不加载的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        myAdsList:function(){
            var myAdsList = [
                {
                    "id": 4,
                    "area": "广东省广州市",
                    "info": "123",
                    "name": "123",
                    "phone": "13545645645",
                    "selected": true
                },
                {
                    "id": 5,
                    "area": "山东省济南市",
                    "info": "asd",
                    "name": "asd",
                    "phone": "13545345234",
                    "selected": false
                }
            ];
            this.myAdsList = myAdsList;
        },

            <ul class="choose">
                <li class="choose-item" v-for="myAdsItem in myAdsList">
                    {{myAdsItem.name}} , {{myAdsItem.phone}}
                </li>
            </ul>

执行上述代码，页面一片空白，不断刷新页面，发现页面源代码会一闪而过，但对应数据完全不加载，审查元素中找不到循环的结构体。

问题原因：函数名称和数组变量名重复了（myAdsList）

解决方法：修改数组名字为myAdsArr，解决！