Question

我正在尝试从不同的2个json获取数据。

数据1的
json：[{id：1，name：'abc'}，{id：2，name：'def'}] json for data2：[{product_id：0001，}，{product_id：0002}]

通过使用这些，我想创建这种结构。

myStore = [{id：1，名称：'abc'，产品：[{product_id：0001， }，{product_id：0002}]}，{id：2，名称：'def'，产品：[{product_id： 0003，}，{product_id：0004}]}

<script>
  export default {
    data: () => ({
        myStore: [],
        isLoaded: false,
    }),
    created(){
        this.fetchData()
    },
    watch: {
    '$route': 'fetchData'
    },
    methods: {
        fetchData() {
            axios.get('api/data1')
                .then(response => {
                    this.myStore = response.data
                })
                .catch(error => {
                    console.log(error);
                })
                .then(() => {
                    this.myStore.forEach(subStore => {                    
                        axios.get('api/data2?substore_id=' + subStore.id)
                            .then(response => {
                                this.myStore.products = response.data
                            })
                            .catch(error => {
                                console.log(error);
                            })
                    });
                })
                this.isLoaded = true;
        },
    }, 
  }

我检查了console.log，我想要的结构已正确创建，但是问题在于渲染。我尝试呈现{{myStore}}，我只能看到第一个数据（data1）结果 [{id：1，name：'abc'}，{id：2，name：'def'}] < / em> 当我更新任何代码而没有重新加载页面时（通过F5），vue会更新此更改。这次我可以正确看到想要的结构。但是，当我重新加载页面时，一切都消失了。

Axios异步多请求Vue.js渲染问题

0 个答案: