主页 / 问题 / 1144441
Accepted
Alexander
Asked:2020-06-23 02:53:30 +0000 UTC2020-06-23 02:53:30 +0000 UTC

带有来自 json 的类别和子类别的菜单

  • 772

我需要帮助，我正在制作一个包含类别（主要类别有 parent_id：0）和子类别的菜单，我正在显示主要类别，但我不明白如何显示其 parent_id 类似于主要类别的子类别，我通过 vuex 从 api 获取数据

例如主类别：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;
  }
};
vue.js

1 个回答

  1. Best Answer

    您可以使用该方法，这是代码：

    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>

    • 1

相关问题