Vue數據加載完後再渲染頁面

一、Vue數據加載方式

在Vue項目中，通常需要從後端接口獲取數據，Vue提供了多種方式來實現數據的獲取，包括但不限於：axios、fetch、XMLHttpRequest等。下面以axios為例介紹Vue獲取數據的一般步驟：

axios.get(url)
    .then(response => {
        //處理接口返回數據邏輯
    })
    .catch(error => {
        //處理接口異常邏輯
    })

通過以上步驟可以獲取數據後，將數據綁定到Vue實例中：

new Vue({
    el: '#app',
    data () {
        return {
            list: []
        }
    },
    mounted () {
        axios.get(url)
            .then(response => {
                this.list = response.data
            })
            .catch(error => {
                console.log(error)
            })
    }
})

在mounted鉤子函數中，通過axios獲取數據並將數據綁定到Vue實例的data屬性中的list數組中。

二、渲染頁面與數據加載的關係

在Vue的開發中，通常涉及到從後端獲取數據後動態渲染頁面的需求，而Vue框架會自動完成數據的綁定和視圖的渲染。即當數據更新時，Vue會自動重新渲染視圖。

但此時需要注意的是，當頁面的渲染需要依賴於後端的數據時，需要確保數據已經完全加載完成後再渲染頁面。否則可能會導致渲染出錯、數據未顯示等問題。

三、解決方法

1. 使用v-if判斷數據是否加載完成

這種方法可以保證只有當數據加載完畢後，才會渲染頁面。需要在Vue實例中設置一個變量作為標誌位，當數據加載完畢後修改該變量的值為true。

new Vue({
    el: '#app',
    data () {
        return {
            list: [],
            isLoaded: false
        }
    },
    mounted () {
        axios.get(url)
            .then(response => {
                this.list = response.data
                this.isLoaded = true
            })
            .catch(error => {
                console.log(error)
            })
    }
})

然後在模板中使用v-if指令判斷數據是否已經加載完畢：

{{ item }}
原創文章，作者：RBWML，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/351604.html