Vue.js中如何将v-for循环的元素索引绑定到元素模型

嘿，我来帮你搞定这个问题～看你的代码，你现在是用v-for循环渲染mymodel.some_collection里的元素，点击按钮新增元素，但想要把每个元素对应的循环索引绑定到它自己的模型对象里对吧？

这里给你两种实用的解决方案，你可以根据自己的需求选：

方案一：新增元素时直接添加索引属性 #

如果你只是想让新增的元素一开始就带上对应的索引，那在push新元素的时候，直接用当前数组的长度作为新元素的索引就好（因为push之后数组长度会+1，当前长度正好是新元素的索引值）：

// 把点击事件改成调用这个方法
const addNewDiv = () => {
  const newIndex = mymodel.value.some_collection.length;
  mymodel.value.some_collection.push({ index: newIndex });
};

模板里就可以直接用div_model.index来访问这个索引了，比如：

<div v-for="(div_model, index) in mymodel.some_collection" :key="div_model.index">
  当前元素索引：{{ div_model.index }}
</div>

不过要注意哦，这个方法的索引是固定的——如果之后你删除了数组里的某个元素，剩下元素的索引不会自动更新，还是原来的值。

方案二：实时同步循环索引到元素模型 #

如果你希望不管数组怎么增删改，每个元素的索引都和v-for循环里的index保持一致，那可以结合watch监听数组变化，自动更新每个元素的索引：

首先，在模板里正常循环：

<div v-for="(div_model, index) in mymodel.some_collection" :key="div_model.id">
  当前实时索引：{{ div_model.index }}
</div>

然后添加watch监听数组变化，更新每个元素的index：

watch(
  () => mymodel.value.some_collection,
  () => {
    mymodel.value.some_collection.forEach((item, idx) => {
      item.index = idx;
    });
  },
  { deep: true } // 深度监听数组内部元素的变化
);

另外，这里还要提醒你一个小细节：v-for的key最好不要用index，尤其是当数组有增删、排序操作的时候，容易导致DOM复用出错。建议给每个新增的元素加个唯一标识，比如用时间戳当id：

const addNewDiv = () => {
  const newId = Date.now(); // 生成唯一id
  mymodel.value.some_collection.push({ id: newId });
};

然后模板里的key就用:key="div_model.id"，这样更稳妥。

备注：内容来源于stack exchange，提问作者Alexey Malev