Retrieve a string using Axios and update an object with the same input in Vue 3

Question

Retrieve a string using Axios and update an object with the same input in Vue 3

I am currently faced with a situation where I have a table that receives the userList as props and renders it using v-for="(user, index) in userList" :key="index" to display the username. However, my Swagger API now requires me to update the data structure to something like username:{value: "", operand: 1} when making a patch request. Can anyone provide guidance on how to change the data type and send it as formData to my axios patch request? My axios.patch method looked different before this requirement was discovered :')

async userEdit(id) {
      const response = await this.$store.dispatch('axiosPatch', {url: `/employees/${id}`,
        formData: {
          username: {value: this.username.value, operand: 1},
          email: this.email,
          mobile: this.mobile,
        }
    }, this.$data)
   },

The input form used is structured as follows:

<input type="text" class="text-xs text-secondary mb-0 text-center
                  border-0 bg-white w-100 p-1"
        :disabled="!user.disabled"
        :value="user.nationalCode">

javascript vue.js ecmascript-6 axios

Answer 1

Answer №1

To streamline the data handling process, consider declaring an object variable within the data section where you can assign various items to it. For instance, define an object called items in the data and then proceed to specify individual properties such as items.username and items.email. When preparing to transmit this object to the server, you can easily convert these properties by implementing a for loop. Here's an example:

let dataToPatch = [];
let items = {username:'Ali',email:'[email protected]'};
for(item in items){
  const newItem = {};
  newItem[item] ={value:items[item],operand: 1};
  dataToPatch.push(newItem);
}

console.log(dataToPatch)

Answer 2

To streamline the data handling process, consider declaring an object variable within the data section where you can assign various items to it. For instance, define an object called items in the data and then proceed to specify individual properties such as items.username and items.email. When preparing to transmit this object to the server, you can easily convert these properties by implementing a for loop. Here's an example:

let dataToPatch = [];
let items = {username:'Ali',email:'[email protected]'};
for(item in items){
  const newItem = {};
  newItem[item] ={value:items[item],operand: 1};
  dataToPatch.push(newItem);
}

console.log(dataToPatch)

Retrieve a string using Axios and update an object with the same input in Vue 3

Answer №1

Similar questions

Stopping errors are a common occurrence in synchronous AJAX

Using Javascript in ASP.NET MVC to set an uploaded image as the background

Fetch data using useSWR with Axios will return the entire response object instead of just the

Issue with implementing setTimeout on await fetch() result

Is there a way to utilize code to invoke a method of an object? For example, calling MyObject.XVariable(//some function

What is the way to utilize JavaScript for parsing Ruby JSON strings?

With Vue 3 Pinia, values fetched from an API within a Pinia store cannot be statically assigned; they will always be reactive

Having difficulties accessing the /playlists route with express and app.get in my code

Storing API data in localStorage using VueJS: A step-by-step guide

Making adjustments to a Jquery data attribute can have a direct impact on CSS

Mobile site experiencing owl.carousel responsiveness issues after refreshing the page

Generate an animated sequence transitioning smoothly from the left side to the center

The `toString` function is displaying an array instead of the expected string

Large data sets may cause the Highchart Bar to not display properly

Having issues with TableExport.js exporting Bootstrap HTML tables

Creating independent Javascript applications and HTML5 canvas games, optimized for V8 or tailored to the specific browser for optimal performance

Limiting joined rows in Sequelize ORM for a many-to-many association: A helpful guide

I am looking to connect the contents of a subfolder page with a page located in the main folder

Managing the close event of a lightbox

Transfer information from .gs (Google Apps Script) to a variable inside a <script> tag in an HTML document