Axios Async Multiple Request Vue.js проблема рендеринга - PullRequest
Новая
       32

Axios Async Multiple Request Vue.js проблема рендеринга

0 голосов
/ 25 октября 2018

Я пытаюсь получить данные из разных 2 JSON.

json для данных1: [{id: 1, имя: 'abc'}, {id: 2, имя: 'def'}] json для данных2: [{product_id: 0001,},{product_id: 0002}]

Используя их, я хотел бы создать такую ​​структуру.

myStore = [{id: 1, имя: 'abc', продукты: [{product_id: 0001,}, {product_id: 0002}]}, {id: 2, имя: 'def', products: [{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'}] Когда я обновляю любой код без перезагрузки страницы (через F5), vue обновляет это изменение.На этот раз я могу правильно видеть структуру, которую хочу иметь.Но когда я перезагружаю страницу, все уходит.

...