меню с категориями и подкатегориями из json

Question

нужна помощь, делаю меню с категориями(у основных категорий parent_id: 0) и подкатегориями, основные категории вывожу норм, а как вывести подкатегории у которых parent_id как у основной категории не пойму, данные получаю из апи через vuex

например, основная категория: id: 323, parent_id: 0,

подкатегория: id: 13, parent_id: 323,

   <ul class="menu-list">
      <li class="menu-item" v-for="category in CATEGORIES" v-if="category.parent_id === 0">
        <button class="menu-button">{{ category.title}}</button>

        <ul class="menu-sub-list">
          <li class="menu-item" >
            <button class="menu-button">{{ }}</button>
          </li>
        </ul>

      </li>
    </ul>

vuex

import axios, * as others from 'axios'
export const state = () => ({
  categories: []
});
export const mutations = {
  SET_CATEGORIES_TO_STATE:(state, categories) => {
    state.categories = categories
  }
};
export const actions = {
  GET_CATEGORIES_FROM_API({commit}) {
    return axios('https://exmple.com/',{
      method: "GET"
    })
      .then((categories) => {
        commit('SET_CATEGORIES_TO_STATE', categories.data);
        return categories;
      })
      .catch((error) => {
        console.log("error")
        return error;
      })
  }
};
export const getters = {
  CATEGORIES(state){
    return state.categories;
  }
};

Answer 1

Можно использовать метод, вот код:

new Vue({
  el: '.menu-list',
  data() {
    return {
      categories: [{
        "_id": 1,
        "parent_id": 0,
        "text": "comment",
      }, {
        "_id": 2,
        "parent_id": 1,
        "text": "reply to comment",
      }, {
        "_id": 3,
        "parent_id": 2,
        "text": "reply to reply to comment",
      }, {
        "_id": 4,
        "parent_id": 3,
        "text": "reply to reply to reply to comment",
      }],
      // childs: [],
    }
  },
  methods: {
    getChildsById(id) {
      return this.categories.filter(c => c.parent_id === id)
      // либо так this.childs = this.categories.filter(c => c.parent_id === id) и вызывать метод где-то не в цикле)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul class="menu-list">
  <li class="menu-item" v-for="category in categories" v-if="category.parent_id === 0">
    <button class="menu-button">{{ category.text }}</button>

    <ul class="menu-sub-list">
      <li class="menu-item" v-for="sub in getChildsById(category._id)">
        <button class="menu-button">{{ sub.text }}</button>
      </li>
    </ul>

  </li>
</ul>

БЛОГ НА HUSL

меню с категориями и подкатегориями из json

Ответы (1 шт):