Как увеличить значение при отображении 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 мой индекс всегда будет обновляться.

Другим решением, возможно, может быть проверка вычисленного if в строке g-item не слишком g-empty, однако я даже не уверен, что это возможно, и все же не вижу, насколько точно я мог бы это сделать.

Лучше всего было бы увеличивать отображаемое значение, как это делается при рендеринге шаблонов PHP, таких как Smarty или Blade. Но поскольку фреймворки javascript должны быть реактивными, есть ли способ сделать это?

Приветствуются любые идеи.


html vue.js vuejs2 vue-reactivity masonry
person Baldráni    schedule 04.12.2019    source источник
comment
Это очень непонятно, начиная с того, что у меня есть каменная кладка, я никогда раньше не слышал этот термин в контексте компьютерного программирования. Также вы говорите, что решением, возможно, может быть проверка с помощью вычислений - вы пробовали это и столкнулись с проблемой? Если да, то опубликуйте, пожалуйста, попытку.   -  person Dexygen    schedule 04.12.2019
comment
@GeorgeJempty вопрос отредактирован :)   -  person Baldráni    schedule 04.12.2019
comment
Хорошо, если бы вы пометили его с помощью масонства, я мог бы поискать этот тег, чтобы узнать, что это такое. Таких библиотек так много, что трудно угнаться за всеми, кроме самых распространенных. Я добавил к вашему вопросу тег Masonry.   -  person Dexygen    schedule 04.12.2019

Ответы (2)


arrow_upward
2
arrow_downward

Неясно, как выглядят ваши данные, но вы можете установить 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
  }
}
person AlekseyHoffman    schedule 04.12.2019
comment
Иисус благодарит тебя, я не знаю, почему я раньше не учил такому решению! - person Baldráni; 04.12.2019
comment
Благодарю Тебя, Господь? Спасибо, Ларри! youtube.com/watch?v=qYVK_OqyUzk&t=2m12s - person Dexygen; 04.12.2019

arrow_upward
2
arrow_downward

Увеличение переменной во время рендеринга требует использования method, что нарушает реактивность. По этой причине я рекомендую рассчитывать индекс каждого изображения перед рендерингом. В общем, процесс рендеринга должен быть именно таким - рендерингом данных, которые уже есть.

Если вы не можете изменить массив данных изображения, чтобы включить свойство индекса, вы можете использовать отдельный массив или хэш для хранения значений индекса. Если массив данных изображения может быть изменен кодом, находящимся за пределами вашего компонента, вы можете использовать watch для обновления значений индекса при изменении данных изображения. В этом случае также не забудьте использовать ловушку created или mounted для инициализации значений индекса при загрузке компонента.

ОБНОВЛЕНИЕ

Вместо инициализации значений индекса с помощью ловушки created или mounted просто установите свойство immediate часов. Это заставляет его запускаться при загрузке компонента, а также при изменении наблюдаемого значения.

person Jason Smith    schedule 04.12.2019