鍍金池/ 問答/HTML/ 關(guān)于vue在mounted中的數(shù)據(jù)問題

關(guān)于vue在mounted中的數(shù)據(jù)問題

在mounted周期中，使用data中的屬性沒有數(shù)據(jù)。

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

從api里面獲取到了數(shù)據(jù)并存在this.list屬性中，

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

想在mounted中使用this.list數(shù)據(jù)，打印出來(lái)的是個(gè)默認(rèn)的null值

clipboard.png

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

回答
編輯回答
旖襯

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

        const data = response.data;
        this.list=data   1.這里面的this指向不對(duì) 2 獲取數(shù)據(jù)前調(diào)用一下 getList()方法
        console.log(this.list)

});

2017年10月12日 04:05
編輯回答
冷咖啡

可以直接在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
                        });
                    })
                }
            }
2017年6月29日 10:57
編輯回答
薄荷糖

在mounted中調(diào)用this.getList(),這樣this.list就能有值了

2018年4月14日 18:41
編輯回答
大濕胸

這是異步的問題

2018年3月15日 03:06
編輯回答
瘋浪

需要先執(zhí)行g(shù)etList()
`
mounted() {

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

},
`

2017年1月19日 09:41
編輯回答
冷眸
mounted() {
    this.getList()
    setTimeout(() => {
        console.log(this.list)
    },2000)
}

這樣子就能獲取到，我用這個(gè)是成功了，因?yàn)間etList是異步的，所以也需要一個(gè)異步的函數(shù)來(lái)打印this.list，不然的話你應(yīng)該能夠看到控制臺(tái)先打印出來(lái)的是mounted里的this.list，然后再打印出來(lái)getList里的this.list，讓兩個(gè)都變成異步的就可以了

2017年3月3日 22:41