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

【问题标题】：how can get index & count in vuejs如何在 vuejs 中获取索引和计数
【发布时间】：2016-06-20 19:22:20
【问题描述】：

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

输出：
该指数：0
该指数：1

我的问题是：

如何获得价值索引首先开始：例如 1
我想要像这样的输出：
这个索引：1
这个索引：2
如何从索引中获取计数，即输出如下：
此索引：1
此索引：2
此计数：2 字段

【问题讨论】：

简单说明：我会简单地使用$index，看起来更干净。 <li v-for="item in catalogs">this index : {{$index}}</li>
对于其他查看此问题的人，上述评论仅适用于 Vue 1。Vue 2 已放弃 $index 语法，转而支持显式声明索引。

标签： vue.js

【解决方案1】：

你可以加1

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

获取数组/对象的长度

{{ catalogs.length }}

【讨论】：

规格有变化吗？现在看来是（目录，itemObjKey）......我们可能应该更新这个。
@Jonah 它有：vuejs.org/v2/guide/list.html#v-for-with-an-Object 想知道为什么我的“索引/键”是一个对象而“值”是一个数字！

【解决方案2】：

或者，您可以使用，

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

这工作得很好。

【讨论】：

(catalog, key) 必须用括号括起来
我建议使用索引而不是键，因为键并不总是数字。 @deathemperor 不必包装即可工作。

【解决方案3】：

可选的 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'
    }
  }
})

以下将打印出 key : value 对。（你可以随意命名“每个”和“我”）

<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

【讨论】：

【解决方案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 1.x guide

使用 Vue 2.x，v-for 提供了一个第二个可选参数引用当前项目的索引，您可以在您的 mustache 模板中为其添加 1，如前所示：

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

见：Vue 2.x guide

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

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

希望对您有所帮助。

【讨论】：

【解决方案5】：

为什么要打印 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 还支持可选的第二个参数（不是第一个）当前项目的索引。

【讨论】：

【解决方案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>

来源：https://alligator.io/vuejs/iterating-v-for/

【讨论】：

这个答案应该更接近顶部！
这就是我要找的。这应该是可以接受的答案。谢谢！

【解决方案7】：

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

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

在你的脚本上添加这个

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

【讨论】：