如何在vuejs中获取索引和计数

Question

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

输出:
这个指数：0
这个索引：1

我的问题是:

Answer 1

你可以只加 1

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

获取array/objects

的长度

{{ catalogs.length }}

Answer 2

或者，您可以只使用，

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

这工作得很好。

Answer 3

可选的 SECOND 参数是索引，从 0 开始。因此要输出名为 'some_list' 的数组的索引和总长度：

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

如果您循环访问的不是列表，而是对象，则第二个参数是 key/value 对的键。所以对于对象 'my_object':

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

以下将打印出键：值对。（你可以随意命名 'each' 和 'i'）

<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

Answer 4

使用 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 2.x，v-for 提供了一个 第二个可选参数 引用当前项目的索引，你可以在你的小胡子里加 1之前看到的模板：

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

消除 v-for 语法中的括号也可以正常工作，因此：

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

希望对您有所帮助。

Answer 5

Why its printing 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 also supports an optional second argument (not first) for the index of the current item.

Answer 6

如果您的数据是以下结构，您将得到字符串作为索引

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>

Answer 7

这可能是一个脏代码，但我认为它就足够了

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

在你的脚本中添加这个

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

how can get index & count in vuejs