Let's break down and fix both issues you're facing one by one:

1. Resolving the preventDefault TypeError #

The error pops up because when you call this.checkForm() inside saveUser, you aren't passing the event object to it. The checkForm method expects an event parameter (e) to run e.preventDefault(), but since you don't pass it, e becomes undefined.

Fix Options: #

• Option 1: Pass the event to checkForm
  Update your saveUser method to pass the event when invoking checkForm:

  saveUser(event){
    this.checkForm(event) // Pass the event here
    if(!this.errors.length) {
      // ... rest of your submission logic
    }
  }
  

• Option 2: Remove redundant preventDefault
  Since your form already uses @submit.prevent (which automatically stops the default form submission behavior), you can safely remove the e.preventDefault() line from checkForm (or add a safety check to avoid errors if e is undefined):

  checkForm: function (e) {
    this.errors = [];
    // ... your validation rules
    if (!this.errors.length) {
      return true;
    }
    // Only run preventDefault if the event exists
    if (e) e.preventDefault();
  }
  

2. Fixing Empty Data Submission to Database #

The core problem here is that your template's input fields are bound to standalone data properties (name, country, email, mobile_no), but you're submitting the newUser object which isn't linked to these inputs. So when you type into the fields, the values never make it into newUser, leading to empty data being sent to your backend.

Fix: Bind inputs directly to newUser properties #

Update your template to tie each input to the corresponding property in newUser instead of standalone variables:

<!-- Name input -->
<input id="name" class="form-control" v-model="newUser.name" type="text" name="name">

<!-- Country selector -->
<country-select id="Country" class="form-control" v-model="newUser.country" :country="newUser.country" topCountry="US" />

<!-- Email input -->
<input id="email" class="form-control" v-model="newUser.email" type="email" name="email">

<!-- Mobile No input -->
<input id="mobile" class="form-control" v-model="newUser.mobile_no" type="text" name="mobile">

Also, ensure your readonly trx input is correctly populated with newUser.trx_no (from your getAllUsers call) so that value gets submitted too:

<input id="trx" class="form-control trx-address-nooverflow" type="text" name="TRX Address" readonly v-model="newUser.trx_no">

Bonus: Update Validation Logic #

Since you're now using newUser, adjust your validation to check its properties instead of standalone ones:

checkForm: function (e) {
  this.errors = [];
  if (!this.newUser.name) {
    this.errors.push("Name Required.");
  }
  if (!this.newUser.country) {
    this.errors.push("Country Required.");
  }
  if (!this.newUser.email) {
    this.errors.push('Email Required.');
  } else if (!this.validEmail(this.newUser.email)) {
    this.errors.push('Valid Email Address Required.');
  }
  if (!this.newUser.mobile_no) {
    this.errors.push("Phone Number Required.");
  }
  if (!this.errors.length) {
    return true;
  }
  if (e) e.preventDefault();
}

After these changes, your form values will sync properly to newUser, the preventDefault error will disappear, and your backend should receive the filled-in data. Double-check your PHP code to ensure it's correctly reading the field names you're sending (e.g., trx_no, name, etc.) from the FormData.

内容的提问来源于stack exchange，提问作者Being MR.G