Vue v-for向子组件传index prop值异常 如何实现索引从0开始

你的写法存在两个核心错误，直接导致index数值不符合预期：

1. Vue模板渲染不是单次执行的，组件每次重渲染、虚拟DOM diff对比时，都会重新执行模板里的所有绑定表达式。你写的:index="counter++"每次渲染都会触发counter自增，不是只在v-for首次遍历列表时执行，组件多次渲染后counter数值自然会偏离预期，出现909这类异常值。
2. counter是定义在data中的响应式数据，自增修改它的值会反过来触发组件重渲染，形成“渲染-自增-触发渲染”的恶性循环，数值会涨得更快。

v-for指令原生就支持获取从0开始的遍历索引，完全不需要你自己维护计数变量，这也是官方推荐的写法。
直接修改模板里的v-for语法，拿到内置的index参数传给子组件即可，同时删掉你自定义的counter相关代码：

<template>
    <span class="pt-3">
        <GoodMacroElement
            v-for="(goodMacro, index) in goodMacroData"
            :key="index"
            :macro="goodMacro"
            :index="index"
            class="row mt-3"
        ></GoodMacroElement>
    </span>
</template>

<script>
import GoodMacroElement from "./GoodMacroElement"

export default {
  components:{
    GoodMacroElement
  },
  name: "goodMacros",
  data(){
    return {
      name: 'GoodMacros',
      goodMacroData: null
    }
  },
  beforeMount() {
    this.goodMacroData = window.GOOD_MACROS;
  },
}
</script>

<style scoped>

</style>

• 不要在模板的绑定表达式里写带副作用的逻辑（比如修改变量值、发起请求这类操作），模板渲染的执行时机不受直接控制，很容易出现数据错乱。
• 上面代码里补了v-for必填的:key绑定，如果你的goodMacro数据里有唯一标识（比如macroId这类字段），建议把key换成这个唯一值，比用索引做key的性能更好，也能避免列表增删时出现组件状态错乱的问题。

内容的提问来源于stack exchange，提问作者dr_fg2