javascript - Vue 多个 v-for 循环...还有其他方法吗

Question

我正在将 vuex 存储与 vue 一起使用，但现在由于循环，我在从 vuex 获取值时遇到了一些问题

我的商店看起来像:

categoires: [
  {
    name: 'category1',
    id: '1',
    path: '/category1',
    subcategories: [
      {
        name: 'subcat1',
        id: '11'
        subsub: [
          {
            name: 'subsub1',
            id: '111'
          },
          {
            name: 'subsub1',
            id: '111'
          },
        ],
      },
    ],
  },
],

<span v-for="(category, index) in categories.categories" :key="index" v-if="category.name === 'category1'">
    <span v-for="(sub, index) in category.subcategories" :key="index">{{sub.name}}
</span>
    </span>

还有其他方法可以完成工作吗？

干杯

Answer 1

您可以过滤category.name的数据。

演示 https://jsfiddle.net/sumitridhal/5zyzuxqy/1/

JS

 const store = new Vuex.Store({
    state: {
        categoires: [{
                name: 'category1',
                id: '1',
                path: '/category1',
                subcategories: [{
                    name: 'subcat1.1',
                    id: '11',
                    subsub: [{
                            name: 'subsub1',
                            id: '111'
                        },
                        {
                            name: 'subsub1',
                            id: '111'
                        },
                    ]
                },{
                    name: 'subcat1.2',
                    id: '11',
                    subsub: [{
                            name: 'subsub1',
                            id: '111'
                        },
                        {
                            name: 'subsub1',
                            id: '111'
                        },
                    ]
                }]
            },
            {
                name: 'category2',
                id: '2',
                path: '/category2',
                subcategories: [{
                    name: 'subcat2',
                    id: '22',
                    subsub: [{
                            name: 'subsub2',
                            id: '222'
                        },
                        {
                            name: 'subsub2',
                            id: '222'
                        }
                    ]
                }]
            }
        ]
    },
    getters: {
        getCategoires: state => () => state.categoires
    }
})

new Vue({
    el: '#app',
    store,
    data: {
        categories: null
    },
    created() {
        this.categories = this.$store.getters.getCategoires();
    },
    computed: {
        filteredData: function() {
            var filter = this.categories.filter(function(category) {
                //you filter logic here
                return category.name === 'category1';
            });
             console.log(filter[0]);
            return filter[0];
        }
    }
})

HTML

<div class="container" id="app">
  <span v-for="(sub, index) in filteredData.subcategories" :key="index">{{sub.name}}
  </span>
</div>