Vue.js中函数间传递数组值时arrlength为undefined的解决求助

嗨，我来帮你排查这个问题～

你遇到的arrlength为undefined的问题，主要有两个核心原因：

1. 你在validateBeforeSubmit里声明的fieldsVal是局部变量，saveForm方法根本访问不到这个变量；
2. 你在ready钩子（Vue2里已经废弃，建议用mounted）里同步调用了两个方法，但如果validateBeforeSubmit的逻辑还没执行完，saveForm就已经跑起来了，自然拿不到值。

下面是具体的修复方案，分两种场景：

一、无异步操作的同步场景 #

先把数组放到Vue的data中，让组件的所有方法都能共享这个数据，再确保执行顺序正确：

export default {
  name: '',
  data() {
    return {
      fieldsVal: [] // 将数组声明为组件的响应式数据
    }
  },
  mounted() { // 替换废弃的ready钩子
    // 先执行校验并组装数组，再执行保存
    this.validateBeforeSubmit()
    this.saveForm()
  },
  methods: {
    validateBeforeSubmit() {
      // 直接操作this.fieldsVal，不再用局部变量
      this.fieldsVal = []
      const firstName = document.getElementById('firstName').value
      const lastName = document.getElementById('lastName').value
      // 把需要的字段添加到数组中
      this.fieldsVal.push(firstName, lastName)
      // 这里可以继续添加其他字段的处理逻辑
    },
    saveForm() {
      const arrLength = this.fieldsVal.length
      console.log('数组长度：', arrLength) // 现在能正常拿到值了
      // 你的表单保存逻辑写在这里
    }
  }
}

二、包含异步操作的场景（比如校验接口请求） #

如果validateBeforeSubmit里有异步操作，要让它返回Promise，用async/await保证顺序：

export default {
  name: '',
  data() {
    return {
      fieldsVal: []
    }
  },
  async mounted() {
    // 等待校验逻辑完成后，再执行保存
    await this.validateBeforeSubmit()
    this.saveForm()
  },
  methods: {
    async validateBeforeSubmit() {
      // 模拟异步校验请求
      await new Promise(resolve => {
        setTimeout(() => {
          const firstName = document.getElementById('firstName').value
          const lastName = document.getElementById('lastName').value
          this.fieldsVal = [firstName, lastName]
          resolve()
        }, 1000)
      })
    },
    saveForm() {
      const arrLength = this.fieldsVal.length
      console.log('数组长度：', arrLength)
      // 保存逻辑
    }
  }
}

额外建议：尽量避免直接操作DOM #

Vue的核心是数据驱动，你可以用v-model绑定表单字段，不用手动通过document.getElementById取值，代码会更简洁且符合Vue的设计思想：

<template>
  <div>
    <input v-model="form.firstName" type="text" />
    <input v-model="form.lastName" type="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        firstName: '',
        lastName: ''
      },
      fieldsVal: []
    }
  },
  mounted() {
    this.validateBeforeSubmit()
    this.saveForm()
  },
  methods: {
    validateBeforeSubmit() {
      this.fieldsVal = [this.form.firstName, this.form.lastName]
    },
    saveForm() {
      console.log(this.fieldsVal.length)
    }
  }
}
</script>

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