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()

创建数组

Why never use new Array in Javascript

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

export default {
   name: 'ValidationForm',
}

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

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

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

1 个答案: