遇到vue用axios請求後端json對象,發現vue頁面對應的v-for標籤怎麼都不渲染。
首先控制檯打印數據正常,以爲錯誤出現在生命週期鉤子上面。
axios請求在dom渲染之後,但是一頓操作之後還是沒有用。
參考了很多種方法,
第一種就是在v-for外面包一層v-if,判斷收到的數據不爲空才顯示。
<div v-if="list.length != 0">//判斷不爲空
<div class="list" :key="index" v-for="item,index in list">
<div class="body">
<div class="img">
結果還是失敗。究其本身他v-for本身不渲染,判斷是否爲空並沒有什麼意義。
第二種,使用setTimeout延遲加載axios。
仍然未果…
然後不斷的找不斷地調試,最後解決了問題。
axios請求過來的json對象打印爲數組,一開始我是用的ref()變爲響應式,但是數組應該在定義初始化的時候用reactive。
const list = reactive([]) as any[];
加as any[] 是因爲用ts會報錯。
使用axios獲取到result對象之後,取得result.data的對應的json對象,通過foreach遍歷然後把每一個對象數組push到自己定義的響應式數組中。不能直接賦值,比如說list = res.data。
具體代碼:(這裏的axios我是封裝過後的)
const list = reactive([]) as any[];//現在setup中定義
onMounted(()=>{
axios.getList(‘url’).then(res=>{
res.data.forEach((element: any) => {
list.push(element);//循環賦值
});
console.log(list)
})
})
然後就可以用v-for遍歷再用{{}}取值顯示了。
中途還用過好多方法,可惜都沒用。