@KRHD

Как на определенной итерации v-for обнулить индекс?

Есть v-for и во время определенной итерации нужно index (который является числом итерации)
Вернуть нулю, как это сделать?

Проблема в том, что обнулятся он должен когда в итерации в переменной item.depth будет null
  • Вопрос задан
  • 367 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Можно сделать...

  • ...вычисляемое свойство, где к элементам массива будет прицеплено нужное значение:

    computed: {
      itemsWithBullshitCounter() {
        let counter = -1; /* или 0, если хотите, чтобы нулевой элемент массива получил ненулевой индекс
                             в том случае, если для него не выполняется условие обнуления */
        return this.items.map((n, i) => ({
          ...n,
          counter: counter = (здесь проверяете, надо ли обнулить счётчик
            ? 0
            : counter + 1
          ),
        }));
      },
    },

    <div v-for="n in itemsWithBullshitCounter">
      вместо индекса используете значение добавленного свойства: {{ n.counter }}
    </div>

    https://jsfiddle.net/hk93q6gf/

  • ...вычисляемое свойство, где исходный массив будет разбит на несколько кусков:

    computed: {
      chunkedItems() {
        return this.items.reduce((acc, n, i) => {
          if (!i || на текущем элементе надо сбросить индексацию) {
            acc.push([]);
          }
    
          acc[acc.length - 1].push(n);
    
          return acc;
        }, []);
      },
    },

    <template v-for="chunk in chunkedItems">
      у каждого куска индексация независимая:
      <div v-for="(n, i) in chunk">{{ i }}</div>
    </template>

    https://jsfiddle.net/hk93q6gf/1/

  • ...метод, который будет вычислять нужный индекс (плохо - вычисления выполняются при каждом рендеринге):

    methods: {
      createStrangeIndex(arr, baseIndex) {
        let index = 0;
    
        while (baseIndex > 0 && на элементе arr[baseIndex--] сбрасывать индексацию не надо) {
          index++;
        }
    
        return index;
      },
    },

    <div v-for="(n, i) in items">{{ createStrangeIndex(items, i) }}</div>

    https://jsfiddle.net/hk93q6gf/2/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@nvdfxx
Senior Pomidor developer
<div for="(item, index) in items">
ID: {{index % x}} // x - определенная итерация
</div>

p.s. Скорее всего, если вам нужно решение через индекс, 99%, что вы что-то делаете неправильно
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Может быть вам просто запустить цикл заново в этом случае? Эффект то тот же.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы