如何在Vue组件中同时传递newQuarters与newtworkKey两个数据到后端

Got it, let's adjust your code to send both the newQuarters object and networkKey integer to your backend in one POST call. Here's a straightforward breakdown:

1. Update Your Component's Save Function #

First, we need to pass both data points to your service. Assuming networkKey is a property on your component (like this.networkKey), modify the service call to include it:

save = (x) => { 
  this.filters.season = 1; 
  if (!this.validation(this.newQuarters)) { 
    // Pass both newQuarters and networkKey to the service method
    this.seasonQuartersService.save(this.newQuarters, this.networkKey).then(r => { 
      this.uiService.toast.success("Saved"); 
    }); 
  } 
}

Quick note: If networkKey comes from the x parameter instead of a component property, swap this.networkKey with the relevant value from x (e.g., x.networkKey).

2. Modify the Service's Save Method #

Next, update the service to accept both parameters and package them into the POST request body:

save = (newQuarters: any, networkKey: number) => { 
  // Include both values in the request body
  return this.$http.post(this.apiUrl + "save", { 
    newQuarters: newQuarters, 
    networkKey: networkKey 
  }); 
}

Pro tip: If you have a TypeScript interface defined for newQuarters, replace any with that interface name to get better type safety in your code.

A Quick Spelling Check #

I noticed you wrote newtworkKey in your requirement—make sure the spelling matches what your backend expects (I used the correct networkKey in the code above). Mismatched field names will cause the backend to miss the value entirely!

Final Confirmation #

Just double-check that your backend endpoint is configured to accept a request body with both newQuarters (object type) and networkKey (integer type) fields. The structure we're sending should align exactly with what the backend is set up to receive.

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