遇到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遍历再用{{}}取值显示了。
中途还用过好多方法,可惜都没用。