Vue.js
vue数据绑定不上,求大神指点一二!
发布于 7 年前 作者 he745764370 3351 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

在使用vuejs时遇到一些问题

  • 二维数组数据绑定问题

  //下面是后台返回的数据
  
  {
    "content": [
        [
            {
                "VideoTypeId": "00000001",
                "VideoTypeName": "类型一",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T05:28:28.000Z"
            },
            {
                "VideoTypeId": "00000002",
                "VideoTypeName": "类型二",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T05:28:39.000Z"
            },
            {
                "VideoTypeId": "00000003",
                "VideoTypeName": "类型三",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T05:28:57.000Z"
            },
            {
                "VideoTypeId": "00000004",
                "VideoTypeName": "类型四",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:12:44.000Z"
            },
            {
                "VideoTypeId": "00000005",
                "VideoTypeName": "类型五",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:13:01.000Z"
            }
        ],
        [
            {
                "VideoTypeId": "00000006",
                "VideoTypeName": "类型六",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:13:12.000Z"
            },
            {
                "VideoTypeId": "00000007",
                "VideoTypeName": "类型七",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:13:21.000Z"
            },
            {
                "VideoTypeId": "00000008",
                "VideoTypeName": "类型八",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:13:28.000Z"
            },
            {
                "VideoTypeId": "00000009",
                "VideoTypeName": "类型九",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:13:37.000Z"
            },
            {
                "VideoTypeId": "00000010",
                "VideoTypeName": "类型十",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:13:45.000Z"
            }
        ],
        [
            {
                "VideoTypeId": "00000011",
                "VideoTypeName": "类型十一",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:13:52.000Z"
            },
            {
                "VideoTypeId": "00000012",
                "VideoTypeName": "类型十二",
                "CreateDate": "2017-05-10T00:00:00.000Z",
                "LastUpdate": "2017-05-10T06:18:37.000Z"
            }
        ]
    ],
    "status": {
        "errMsg": "成功!",
        "status": "00"
    }
}
  


    //这里是vue请求数据的代码
    
    var videoTypeList = new Vue({
        el: '#videoTypeList',
        data: {
            items: [],
        },
        created: function() {
            this.$http.get('videoType/getVideoType').then(function(res) {
                this.$nextTick(function () {
                    this.items = res.body.content;
                    console.log(this.items);
                    for (var i = 0; i < this.items.length; i++) {
                        for (var j = 0;j < this.items[i].length; j++) {
                            console.log(this.items[i][j].VideoTypeName);
                        }
                    }
                });
            });

        }
    });




    //下面是 vue绑定ui的代码
    
    <div class="dropdown-inner" id="videoTypeList">
    
        <ul class="list-unstyled" v-for="item in items">
        
            <li v-for="videoType in item">
                <a href="archive.html" >{{videoType.VideoTypeName}}</a>
            </li>
            
        </ul>
        
    </div>

#最终的运行效果是一共12个li标签3个ul标签 数量是对的 但是li标签里的a标签没有值 也就是说绑定ui代码的{{videoType.VideoTypeName}}这个是空的。 #麻烦大神指点一下问题原因 本人是后台开发对前端框架不是特别了解 谢谢大家了

#代码应该是没有什么问题的,早上试了一下同样的代码,一份直接双击运行,一份是发布到http服务器上运行.直接双击运行的那份出来数据了,http服务上的通过url链接访问就是没有数据,我想请问一下这是为什么,可能是什么原因?

回到顶部