关于vue在mounted中的数据问题

Question

在mounted周期中，使用data中的属性没有数据。

getList() {
  const param = {
    id: this.listQuert.id
  };
  api.workinfo(param).then(response => {
            const data = response.data;
            this.list=data
            console.log(this.list)
  });
}

从api里面获取到了数据并存在this.list属性中，

mounted() {
    console.log(this.list)
},

想在mounted中使用this.list数据，打印出来的是个默认的null值

如果想在mounted中使用this.list需要怎么写，谢谢

Answer 1

可以直接在getList的then方法中打印，
倘若非要在mounted()中使用的话可以呀试下下面这种写法：

            mounted() {
                this.getList().then(() => {
                    console.log(this.list)
                });
            },
            methods: {
                getList() {
                    return Promise.resolve({}).then(() => {
                        const param = {
                            id: this.listQuert.id
                        };
                        return api.workinfo(param).then(response => {
                            const data = response.data;
                            this.list = data
                        });
                    })
                }
            }

Answer 2

在mounted中调用this.getList(),这样this.list就能有值了

Answer 3

mounted() {
    this.getList()
    setTimeout(() => {
        console.log(this.list)
    },2000)
}

这样子就能获取到，我用这个是成功了，因为getList是异步的，所以也需要一个异步的函数来打印this.list，不然的话你应该能够看到控制台先打印出来的是mounted里的this.list，然后再打印出来getList里的this.list，让两个都变成异步的就可以了

Answer 4

api.workinfo(param).then(response => {

        const data = response.data;
        this.list=data   1.这里面的this指向不对 2 获取数据前调用一下 getList()方法
        console.log(this.list)

});

Answer 5

这是异步的问题

Answer 6

需要先执行getList()
`
mounted() {

this.getList().then(() => {
    console.log(this.list)
});

},
`