我有一个像这样的嵌套数据结构:
allItems: [
['a', 'b', 'c'],
['d', 'e', 'f'],
['g', 'h', 'i'],
]
我需要完全像这样代表:
Category 1
..........(a) Item 1
..........(b) Item 2
..........(c) Item 3
Category 2
..........(d) Item 4
..........(e) Item 5
..........(f) Item 6
Category 3
..........(g) Item 7
..........(h) Item 8
..........(i) Item 9
但是我无法在v-for之间保持反击... 请注意,我无法控制数据,并且会为用户提供对数据进行排序的方法,但是他想让我无法在数据中添加计数器。
这里是fiddle
答案 0 :(得分:0)
您可以执行以下操作:
<template>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(row,i) in allItems" :key="row">
Category {{i+1}}
{{ updateCnt(row, i) }}
<div v-for="(col,j) in row" :key="col">
...................({{col}}) Item {{ cnt + j + 1}}
</div>
</div>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
allItems: [
['a', 'b', 'c'],
['d', 'e', 'f'],
['g', 'h', 'i'],
],
cnt: 0
},
methods: {
updateCnt(row, i) {
this.cnt = i * row.length;
}
}
})
</script>