首页 前端知识 解决:vue3使用axios返回json用v-for遍历失效,标签不渲染

解决:vue3使用axios返回json用v-for遍历失效,标签不渲染

2024-06-25 23:06:01 前端知识 前端哥 904 86 我要收藏
遇到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遍历再用{{}}取值显示了。
中途还用过好多方法,可惜都没用。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13534.html
标签
评论
发布的文章

JSON、Ajax

2024-07-27 22:07:31

JsonNode、ObjectNode和ArrayNode

2024-07-27 22:07:30

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!