중첩된 v-for의 카운터 증가

중첩된 v-for의 카운터 증가

다음과 같은 중첩된 데이터 구조를 가지고 있다.

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...의 사이에 카운터를 둘 수 없다.나는 데이터에 대한 통제력이 없으며 사용자는 데이터 내에 카운터를 추가하는 것을 불가능하게 만들면서 원하는 대로 데이터를 정렬할 수 있다는 점에 유의하십시오.

여기 바이올린이다.

다음과 같은 작업을 할 수 있다.

<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>

참조URL: https://stackoverflow.com/questions/55845664/increment-counter-in-nested-v-for