关于vue在mounted中的数据问题

学不会JS不改名字
  • 86

在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值

clipboard.png

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

回复
阅读 4.7k
6 个回答

可以直接在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
                        });
                    })
                }
            }
花菜姐姐
  • 4
新手上路,请多包涵

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

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

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

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

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

});

这是异步的问题

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

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

},
`

宣传栏