我正在将 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>
还有其他方法可以完成工作吗？
干杯
最佳答案
您可以过滤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>
关于javascript - Vue 多个 v-for 循环...还有其他方法吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43732284/