list - VueJs : How to display nested data comes from promise in component

Question

I have this promise in vuex store with mutation and state:

state: {
    categories: null
  },
actions: {
get_all_categories (context) {
      return new Promise((resolve, reject) => {
        axios.get('http://127.0.0.1:8000/api/all')
          .then(response => {
            if (response) {
              context.commit('getCats', response.data)
              resolve(response)
            }
          }).catch(error => {
            reject(error)
          })
      })
    }
  }},
 mutations: {
    getCats (state, result) {
      state.categories = result
    }
  },

the data comes in nested data containe {id,category ,products{id , name , price}} I want to display a table containe categories and products for each category. I tried this but don't work ,just get the categories :

<template>
  <div class="container">
    <div class="row justify-content-center" v-for="cats in $store.state.categories" :key="cats.id">
      <div class="bg-info w-100 text-center">{{cats.catagory_ar}}</div>
      <div v-for="courses in cats.course" :key="courses.id"></div>
      {{courses.course_name_ar}}
    </div>
 </div>
</template>

How can I do that?

Answer 1

等待大神答复