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

Question

[KRHD]

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

Проблема в том, что обнулятся он должен когда в итерации в переменной item.depth будет null

Comments

[KRHD]

Чтоб было более понятно скажу так, у меня идет итерация и в таблице в первом столбце пишется id и нужно после определенной итерации прировнять этот id = 0 и чтоб считалось заново

Answer 1

[0xD34F]

Можно сделать...

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

  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/
  

Comments

[KRHD]

Проблема в том, что обнулятся он должен когда в итерации в переменной item.depth будет null

[0xD34F]

Вы это в текст вопроса добавьте.

Ответ обновил.

Answer 2

[nvdfxx]

<div for="(item, index) in items">
ID: {{index % x}} // x - определенная итерация
</div>

p.s. Скорее всего, если вам нужно решение через индекс, 99%, что вы что-то делаете неправильно

Comments

[Сергей delphinpro]

KRHD, то же самое начал писать — остаток от деления на количество столбцов. 0 - первый столбик, 1- второй столбик и т.д.

[KRHD]

Сергей delphinpro, Проблема в том, что обнулятся он должен когда в итерации в переменной item.depth будет null

[nvdfxx]

computed: {
    items() {
        let lastIndex = 0
        return this.items.map(e => ({
            ...e,
            id: e.depth === null ? 0 : lastIndex + 1
        }))
    }
}

Answer 3

[Денис Инешин]

Может быть вам просто запустить цикл заново в этом случае? Эффект то тот же.

Comments

[KRHD]

Дак в цикле данные же; заново запущу - заново загрузит из цикла все данные, а надо, чтоб грузило как грузило, но index обновлялся как только item.depth = null

[Денис Инешин]

KRHD, покажите больше вашего кода. Не очень понятно почему загрузит заново.

[Денис Инешин]

KRHD, как вариант:
1. Допустим у вас 10 столбцов и 10 рядов.
2. Умножаем 10 х 10 = 100
3. Создаем цикл из 100 итераций
4. В цикле создаем вложенную переменную Z
5. Каждые 10 итераций сбрасываем ее на 0
6. У вас получится переменная Z которая 10 раз считает от 0 до 9