Vue开发中for循环执行完成后如何将counter值重置为0？

你的代码存在以下几处明显错误：

• Vue的methods配置项要求所有属性为可执行函数，你目前直接在methods对象下写逻辑代码，没有包裹在函数体内，属于基础语法错误
• 要获取数组lengthArray的长度需调用.length属性，你直接将数组对象本身和数值类型的counter比较，逻辑判断永远不符合预期
• 第三个分支判断中未给counter加this指向，会抛出变量未定义的运行时错误
• 重置counter的语句需要放在所有分支逻辑执行完成之后，你之前不生效是因为代码结构错误根本没执行到重置语句

修正后可运行的代码参考：

methods: {
  // 按钮点击绑定的触发函数
  handleClick() {
    const arrLen = this.lengthArray.length
    if(this.counter > arrLen) { 
      for(let i = arrLen; i <= this.counter; i++) {
        // 原有业务逻辑
      }
    } else if (arrLen > this.counter) {
      for(let i = 1; i <= this.counter; i++) {
        // 原有业务逻辑
      }
    } else if (this.counter == 0) { // 补全this指向
      // 原有业务逻辑
    }
    // 所有循环执行完成后统一重置counter
    this.counter = 0
  }
},

data() {
  return {
    counter: 0,
    // 按你的业务需求初始化对应数组
    lengthArray: []
  }
}

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