Vue 2：如何在循环中按条件递增data属性以获取预期输出？

原代码的问题在于：在模板中直接调用修改data属性的方法setSr()，Vue的响应式渲染机制会在组件每次更新时重复执行该方法，导致previous（原拼写preivous是笔误）被多次递增，最终输出不符合预期。

最简解决方案（直接满足预期输出） #

既然预期的第二个值是i-1，无需额外维护data属性，直接在模板中计算即可：

<!-- 模板部分 -->
<ul>
  <li v-for="i in 5" :key="i">
    {{ i }} {{ i - 1 }}
  </li>
</ul>

不需要修改data和methods，直接就能得到目标输出：

1 0
2 1
3 2
4 3
5 4

若需基于条件递增（扩展场景） #

如果后续有复杂条件判断需求，不要在方法中修改全局data，而是通过方法接收参数返回计算值，避免重复执行导致的异常：

// data定义（无需previous）
data() {
  return {}
}

// methods定义
methods: {
  getTargetValue(i) {
    // 这里可以添加自定义条件逻辑，示例返回i-1
    return i - 1;
  }
}

模板调用：

<ul>
  <li v-for="i in 5" :key="i">
    {{ i }} {{ getTargetValue(i) }}
  </li>
</ul>

原代码出错原因 #

模板中调用修改data的方法会触发组件重新渲染，而重新渲染又会再次调用该方法，形成循环，导致previous被多次累加，最终输出混乱。Vue模板中的表达式应尽量避免有副作用（比如修改data），只做纯计算输出。

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