Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Agabala's avatar

Laravel Vue JS 3 Composition APİ File Edit Error

This is my codes but it doesn't work when I post please help me. When I say employee.value in Axios, it updates the data, but I need to update the image, so I say newData but it doesn't send it at that time. Or can someone give me a working composition api code.

<script>
import useEmployee from '../composables/employee'
import { onMounted } from 'vue' import { ref } from "vue";
import axios from "axios"; import { useRouter } from "vue-router";

export default { props : { id : { require : true, type : String } },
 setup(props) {
     const employee = ref({
         'id' : '',
      'img' : '',
      'name' : '',
      'email' : '',
      'description' : '',
      'position' : '',
      'salary' : ''
 })
    const errors = ref("")
    const router = useRouter()

    const getEmployee = async (id) => {
        let response = await axios.get(`/api/employees/${id}`)
        employee.value = response.data.data;
    }

    onMounted(getEmployee(props.id))

    const saveEmployee = async () => {
        await updateEmployee(props.id)
    }

    const updateEmployee = async (id) => {
        try {
            const formdata = new FormData();
               formdata.append('img',employee.value.img)
               formdata.append('name',employee.value.name)
               formdata.append('email',employee.value.email)
               formdata.append('description',employee.value.description)
               formdata.append('position',employee.value.position)
               formdata.append('salary',employee.value.salary)
               let config =
               { headers: {
                   'Content-Type': "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2),
               'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                } }
                // await axios.put(`/api/employees/${id}`,employee.value)  it updates the data
                // await axios.put(`/api/employees/${id}`,formdata,config) it's not working and get error
                await router.push({ name : 'employee.index' })
            } catch (error) {
                if(error.response.status === 422) {
                    errors.value = error.response.data.errors;
           }
            }
    }


 const onFileChange = async (e) => {
     employee.value = e.target.files[0]
 }
      return {
          saveEmployee,
           employee,
           onFileChange,
           errors,
           router,
           updateEmployee,
      }
 }

}
</script>

0 likes
1 reply
MaverickChan's avatar

maybe this line?

 const onFileChange = async (e) => {
     employee.value = e.target.files[0]
 }

should be employee.value.img = e.target.files[0]

1 like

Please or to participate in this conversation.