Vue的多個V-for循環...有我使用與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>