传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

当使用索引直接赋值和直接修改数组长度时,Vue不能检测出变动的数组。
这样写页面显示的是共0个

<span class="pull-right">已全部加载,共{{fileDatas.length}} 个</span>
1
js:

export default {
    data() {
        return {
          fileDatas: []
        }
    },
    created() {
        this.getData();
     },
     methods: {
       getData() {
            var that = this
            var api ='/api/directory/null';
            console.log('api:' + api)
            that.$axios.get(api).then((res) => {
                console.log('data' + JSON.stringify(res.data.data))
                var i =0
                for (i=0;i<res.data.data[0].children.length;i++){
                    that.fileDatas[i] = res.data.data[0].children[i]
                }
                console.log('that.fileDatas##' + that.fileDatas.length)
                console.log('that.fileDatas = ' + JSON.stringify(that.fileDatas))
            })
        }
     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
getData方法要改成下面的,给数组赋值要写成this.$set(),出现的结果是正确的。

methods: {
       getData() {
            var that = this
            var api ='/api/directory/null';
            console.log('api:' + api)
            that.$axios.get(api).then((res) => {
                console.log('data' + JSON.stringify(res.data.data))
                var i =0
                for (i=0;i<res.data.data[0].children.length;i++){   
                    this.$set(this.fileDatas,i,res.data.data[0].children[i])
                    console.log('this.fileDates+++' + JSON.stringify(this.fileDatas))
                }
                console.log('that.fileDatas##' + that.fileDatas.length)
            })
        },
     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
如果是对象数组可以在for循环中定义一个对象赋给数组

for (i=0;i<res.data.data[0].children.length;i++){
                    var obj = new Object()
                    obj.id = res.data.data[0].children[i].id
                    obj.name = res.data.data[0].children[i].name
                    obj.size = res.data.data[0].children[i].size
                    obj.checked = false
                    obj.iconStyle = 'fa fa-folder slot-t-top-button'
                    obj.createTime = res.data.data[0].children[i].createTime
                    console.log('obj===' + JSON.stringify(obj))
                    this.$set(this.fileDatas,i,obj)
                    console.log('this.fileDates+++' + JSON.stringify(this.fileDatas))
                }


分享至 : QQ空间
收藏

1 个回复

倒序浏览
提示: 作者被禁止或删除 内容自动屏蔽
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马