Как получить индекс и счет в vuejs

Ответ 1

вы можете просто добавить 1

<li v-for="(itemObjKey, catalog) in catalogs">this index : {{itemObjKey + 1}}</li>

чтобы получить длину массива/объектов

{{ catalogs.length }}

Ответ 2

В качестве альтернативы вы можете просто использовать

<li v-for="catalog, key in catalogs">this is index {{++key}}</li>

Это работает отлично.

Ответ 3

В случае, если ваши данные имеют следующую структуру, вы получаете строку в качестве индекса

items = {
   am:"Amharic",
   ar:"Arabic",
   az:"Azerbaijani",
   ba:"Bashkir",
   be:"Belarusian"
}

В этом случае вы можете использовать дополнительную переменную для получения номера индекса:

<ul>
  <li v-for="(item, key, index) in items">
    {{ item }} - {{ key }} - {{ index }}
  </li>
</ul>

Источник: https://alligator.io/vuejs/iterating-v-for/

Ответ 4

Необязательный аргумент SECOND - это индекс, начинающийся с 0. Таким образом, чтобы вывести индекс и общую длину массива с именем 'some_list':

<div>Total Length: {{some_list.length}}</div>
<div v-for="(each, i) in some_list">
  {{i + 1}} : {{each}}
</div>

Если вместо списка вы перебираете объект, то вторым аргументом является ключ пары ключ/значение. Итак, для объекта my_object:

var an_id = new Vue({
  el: '#an_id',
  data: {
    my_object: {
        one: 'valueA',
        two: 'valueB'
    }
  }
})

Следующее будет выводить пары ключ: значение. (вы можете назвать "каждый" и "я", как вы хотите)

<div id="an_id">
  <span v-for="(each, i) in my_object">
    {{i}} : {{each}}<br/>
  </span>
</div>

Подробнее о рендеринге списка Vue: https://vuejs.org/v2/guide/list.html

Ответ 5

Используя Vue 1.x, используйте специальную переменную $index следующим образом:

<li v-for="catalog in catalogs">this index : {{$index + 1}}</li>

вы можете указать псевдоним как первый аргумент для директивы v-for, например:

<li v-for="(itemObjKey, catalog) in catalogs">
    this index : {{itemObjKey + 1}}
</li>

Смотрите: Руководство Vue 1.x

Используя Vue 2.x, v-for предоставляет второй необязательный аргумент, ссылающийся на индекс текущего элемента, вы можете добавить 1 к нему в свой шаблон уса, как показано выше:

<li v-for="(catalog, itemObjKey) in catalogs">
    this index : {{itemObjKey + 1}}
</li>

Смотрите: Руководство Vue 2.x

Устранение круглых скобок в синтаксисе v-for также отлично работает:

<li v-for="catalog, itemObjKey in catalogs">
    this index : {{itemObjKey + 1}}
</li>

Надеюсь, что это поможет.

Ответ 6

  Почему его печать 0,1,2...?

Потому что это индексы элементов в массиве, и индекс всегда начинается с 0 до array.length-1.

Чтобы напечатать количество элементов вместо индекса, используйте index+1. Как это:

<li v-for="(catalog, index) in catalogs">this index : {{index + 1}}</li>

И чтобы показать общее количество, используйте array.length, вот так:

<p>Total Count: {{ catalogs.length }}</p>

Согласно DOC:

v-for также поддерживает необязательный второй аргумент (не первый) для индекс текущего элемента.

Ответ 7

это может быть грязный код, но я думаю, что этого может быть достаточно

<div v-for="(counter in counters">
{{ counter }}) {{ userlist[counter-1].name }}
</div>

в свой сценарий добавьте этот

data(){return {userlist: [],user_id: '',counters: 0,edit: false,}},