Send data to server using Axios VueJs

It is necessary to send data to the server in the required format, I don’t understand how to organize it correctly, the same JSON structure. You must send when attaching a file (@change), the file itself and a comment. Here is what I was able to do https://codepen.io/JessikaJes/pen/rNvgYwP

<div id="app" class="container">
   <div class="block">
       <div class="item" v-for="(item, index) in items" :key="index">
           <div class="item__title">{{ item.title }}</div>
           <div class="item__files">
               <div class="file" v-for="(file, index) in item.files">
                   <input type="file" @change="handleFileUpload()">
                   <input type="text" placeholder="comment" v-model="file.comment">
               </div>
           </div>
       </div>
   </div>
</div>
<script>
new Vue({
  el: "#app",
  data: {
    items: [
        {
            id: "42",
            title: "first",
            files: [
                {
                    file: "",
                    comment: "",
                },
                {
                    file: "",
                    comment: "",
                }
            ],
        },
        {
            id: "78",
            title: "second",
            files: [
                {
                    file: "",
                    comment: "",
                },
                {
                    file: "",
                    comment: "",
                }
            ],
        },
    ]
  },
  methods: {
    handleFileUpload() {
      let formData = new FormData();
      // formData.append("file", this.file);
      // formData.append("comment", this.file);
      axios
        .post(`/api/request/${id}`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then(function () {
          console.log("SUCCESS!!");
        })
        .catch(function () {
          console.log("FAILURE!!");
        });
    }
  }
});
</script>

Answer

Change the code like this:

<template>
  <div id="app" class="container">
   <div class="block">
     <div class="item" v-for="(item, index) in items" :key="index">
       <div class="item__title">{{ item.title }}</div>
       <div class="item__files">
         <div class="file" v-for="(fileObj, index2) in item.files">
           <input type="file" v-model="fileObj.file" @change="handleFileUpload($event,fileObj)">
           <input type="text" placeholder="comment" v-model="fileObj.comment">
         </div>
       </div>
     </div>
   </div>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    items: [
        {
            id: "42",
            title: "first",
            files: [
                {
                    file: "",
                    comment: "",
                },
                {
                    file: "",
                    comment: "",
                }
            ],
        },
        {
            id: "78",
            title: "second",
            files: [
                {
                    file: "",
                    comment: "",
                },
                {
                    file: "",
                    comment: "",
                }
            ],
        },
    ]
  },
  methods: 
  {
    handleFileUpload(event, fileObject) 
    {
      let formData = new FormData();
      const file = (event.dataTransfer || event.target).files[0];
      formData.append("file", file);
      formData.append("comment", fileObject.comment);
      axios
        .post(`/api/request/${id}`, formData)
        .then((response) => 
        {
          console.log("SUCCESS!!");
        })
        .catch((error) => 
        {
          console.log("FAILURE!!");
        });
    }
  }
});
</script>