v-if 표시에 값을 증가시키는 방법

v-if 표시에 값을 증가시키는 방법

그 이유를 설명하려면 , 사진의 석조 구조를 가지고 있기 때문에, 각각의 사진에 인덱스를 추가할 필요가 있습니다.

문제는 내 v-for의 지수를 완화시킬 수 없다는 것이다. 왜냐하면 그것은 때때로 고의로 "빈 케이스"이기 때문이다.

|---|---|---|
|   | 2 | 3 |
| 1 |---|---|
|   | 4 | 5 |
|---|---|---|
| 6 |   | 8 |
|---| 7 |---|
| 9 |   | 10|
|---|---|---|

코드는 다음과 같습니다.

<div v-for="(row, i) in rphotos" :key="i">
    <div v-for="(p, j) in row" :key="i*nbCol+j">
       <div v-if="p"
            :data-index="index" 
            class="g-item">
          <!-- Increment index there -->
       </div>
       <div v-else class="g-item g-empty" />
    </div>
</div>

그러나 vuejs 반응성으로 인해 내 인덱스는 항상 업데이트됩니다.

다른 해결책은 아마도 계산한 것을 통해 확인하는 것일 수 있습니다.g-item너무 과하지 않다g-empty하지만 나는 그것이 가능한지조차 확신하지 못하고 내가 얼마나 정확하게 이것을 할 수 있는지 모르겠다.

Smarty나 Blade와 같은 PHP 템플릿 렌더링으로 표시되는 값을 늘리는 것이 가장 좋습니다.하지만 javascript 프레임워크는 반응성이기 때문에 그렇게 하는 방법이 있을까요?

어떤 아이디어라도 환영합니다.

데이터가 어떻게 표시되는지 확실하지 않지만, 데이터 관리 기능을index의 각 항목에 대해rphotos이 인덱스를 표시하기 전에 이 인덱스에 액세스 할 수 있습니다.v-for와 함께p.index:

<div v-for="(row, i) in rphotosFiltered">
    <div v-for="(p, j) in row">
       <div v-if="p.index !== null" :data-index="p.index"></div>
       <div v-else/>
    </div>
</div>

data(): {
  return {
    rphotos: [
      [
        {index: 1, item1: ''},
        {index: null, item2: ''}
      ], 
      [
        {index: 3, item3: ''}
      ]
    ]
  }
},
computed: {
  rphotosFiltered() {
    // modify "this.rphotos" list here the way you need it
    // return it
  }
}

렌더링 중에 변수를 증가시키려면method반응성을 깨는 거죠따라서 렌더링 전에 각 이미지의 인덱스를 계산하는 것이 좋습니다.일반적으로 렌더링 프로세스는 이미 존재하는 데이터를 렌더링하는 과정이어야 합니다.

인덱스 속성을 포함하도록 이미지 데이터 배열을 수정할 수 없는 경우 별도의 배열 또는 해시를 사용하여 인덱스 값을 저장할 수 있습니다.이미지 데이터 배열이 컴포넌트 외부에 있는 코드에 의해 변경될 수 있는 경우watch이미지 데이터가 변경될 때 인덱스 값을 업데이트합니다.이 경우, 반드시created또는mounted훅을 사용하여 컴포넌트가 로드될 때 인덱스 값을 초기화합니다.

갱신하다

인덱스 값을 초기화하는 대신created또는mounted후크, 간단히 설정immediate시계의 특성입니다.이렇게 하면 컴포넌트가 로드될 때와 감시된 값이 변경될 때 강제로 실행됩니다.

언급URL : https://stackoverflow.com/questions/59174065/how-to-increment-a-value-on-display-of-v-if