关于VUE中多层异步请求得到的数据，模板解析数据获取不全

最新推荐文章于 2023-05-30 19:19:49 发布

我所向往的美好

最新推荐文章于 2023-05-30 19:19:49 发布

阅读量755

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46133178/article/details/125577934

版权

在开发Vue项目尚品汇时，遇到一个模板解析问题：三层异步请求获取的数据在组件中只渲染了第一级，二三级未显示。分析原因可能是异步请求未完成即模板已完成渲染。为解决此问题，提出使用v-if根据hoverIndex动态渲染二级菜单，只有当鼠标悬停在特定一级菜单时才渲染对应二级菜单，从而确保数据完全获取后再进行渲染。

摘要由CSDN通过智能技术生成

今天在做一个购物的项目尚品汇时遇到一个问题，就是我在vuex中的actions通过三层异步请求

actions: {
    loadCategoryList: async (context: any) => {
        let categoryList = [];
        //   获取一级菜单
        const res = await getCateGory1();
        if (res.data.code === 200) {
          categoryList = res.data.data;
          // 获取二级菜单
          categoryList.forEach(async (category1: any) => {
            const res2 = await getCateGory2(category1.id);
            if (res2.data.code === 200) {
              category1.childList = res2.data.data;
              // 获取三级菜单
              category1.childList.forEach(async (category2: any) => {
                const res3 = await getCateGory3(category2.id);
                if (res3.data.code === 200) {
                  category2.childList = res3.data.data;
                }
              });
            }
          });
        }