뷰 여러 V-에 대한 루프 ... 내가 VUE와 vuex 저장소를 사용하고 다른 방법

Question

이 있지만, 지금은 때문에 루프의 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>