여러 v-for 루프...다른 방법은 없을까?

여러 v-for 루프...다른 방법은 없을까?

vue와 함께 vuex 스토어를 사용하지만 루프 때문에 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>

그 일을 끝낼 다른 방법이 있나요?

건배.

데이터를 필터링할 수 있습니다.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>

언급URL : https://stackoverflow.com/questions/43732284/vue-multiple-v-for-loop-is-there-any-other-way