如何在vuejs中将数组值从一个函数传递给另一个函数？

Question

我试图从" validateBeforeSubmit"函数到" saveForm "函数获取数组值.但我在" undefined"中得到" "的值arrlength.请帮我解决.

这是我在vue.js中的代码

export default {
  name: '',
  data() {
    return {}
  },
  ready: function() {
    this.validateBeforeSubmit()
    this.saveForm();
  },
  methods: {
    validateBeforeSubmit() {
      var fieldsVal = new Array();
      var firstName = document.getElementById('firstName').value
      var lastName = document.getElementById('lastName').value
      var designation = document.getElementById('designation').value

      if (firstName != "" && lastName != "" && designation != "") {
        fieldsVal.push(firstName);
        fieldsVal.push(lastName);
        fieldsVal.push(designation);
        return fieldsVal;
      } else {
        fieldsVal.length = 0;
        return fieldsVal;
      }
      return fieldsVal;
    },

    saveForm() {
      var fieldsValArray = this.validateBeforeSubmit();
      var arrLength = fieldsValArray.length;
    }
  }
}

Answer 1

我可以在您的代码中看到多个问题:

1)不要应用类似jQuery的方法来获取输入值.请v-model改用.这将简化您的代码

<template>
  <input v-model="form.firstName" type="text"/>
</template>
<script>
export default {
  data: {
    form: { 
      firstName: '',
    }
  },
  methods: {
    validateBeforeSubmit() {
      // take `firstName` directly from `data` not need for `getElementById`
      const firstName = this.form.firstName;
    }
  },
}
</script>

2)取出validateBeforeSubmit并saveForm从ready.准备挂钩已经过时了vue@2.而且没有任何意义.最好在表单上调用它@submit.

3)最好使用[]语法而不是使用语法创建数组new Array()

为什么永远不要在Javascript中使用新的数组

4)始终为组件提供名称以便于调试

export default {
   name: 'ValidationForm',
}

5)我不知道问题在哪里但是有效.请查看以下链接.我已经更新了你的代码.尝试提交表单并检查控制台:

https://codesandbox.io/s/w6jl619qr5?expanddevtools=1&module=%2Fsrc%2Fcomponents%2FForm.vue