rest - How to implement a PUT request in Vue 3

Question

I am trying to implement a PUT request to the https://crudcrud.com/ REST API. I have a list of users and when I click an update button, I would like to show a modal and allow the user to update any of the fields (name, email, image URL). The main concern is that I am struggling with how to format the PUT request.

This is my current solution

// template (UserCrud.vue)
<button @click="update(user._id)">Update</button>

// script
components: { Create },
  setup() {
    const state = reactive({
      users: [],
    })

    onMounted(async () => {
      const { data } = await axios.get(`/users`)
      state.users = data
    })

    async function update(id) {
      await axios.put(`/users/${id}`)
      state.users = ???
    }


    return { state, destroy, addUser }

Here is some sample data:

[
  {
  "_id": "6012303e37711c03e87363b7",
  "name": "Tyler Morales",
  "email": "moratyle@gmail.com",
  "avatar": "HTTP://linkURL.com
  },
]

For reference, this is how I create a new user using the POST method:

export default {
  components: { Modal },
  emits: ['new-user-added'],
  setup(_, { emit }) {
    const isModalOpen = ref(false)
    const state = reactive({
      form: {
        name: '',
        email: '',
        avatar: '',
      },
        })
        
    async function submit() {
      const { data } = await axios.post('/users', state.form)
      emit('new-user-added', data)
      state.form.email = ''
      state.form.name = ''
      state.form.avatar = ''
      isModalOpen.value = false
    }
    return { isModalOpen, submit, state }
  },
}

Check this repo for the complete repo: the files are UserCrud.vue & Create.vue

question from:https://stackoverflow.com/questions/65932675/how-to-implement-a-put-request-in-vue-3

Answer 1

You should pass the user object as parameter then send it as body for the put request by setting the id as param :

<button @click="update(user)">Update</button>
...

    async function update(user) {
       let _user={...user,name:'Malik'};//example
       await  axios.put(`/users/${user._id}`,_user);
      const { data } = await axios.get(`/users`)
      state.users = data
    }

You could use the same code of adding new user for the update by defining a property called editMode which has true in update mode and based on this property you could perform the right request

export default {
  components: { Modal },
  emits: ['new-user-added','user-edited'],
  props:['editMode','user'],
  setup(props, { emit }) {
    const isModalOpen = ref(false)
    const state = reactive({
      form: {
        name: '',
        email: '',
        avatar: '',
      },
        })
     onMounted(()=>{
           state.form=props.user;//user to edit
       }) 
    async function submit() {
     if(props.editMode){
        const { data } = await axios.put('/users/'+props.user._id, state.form)
        emit('user-edited', data)
     }else{
      const { data } = await axios.post('/users', state.form)
      emit('new-user-added', data)
      state.form.email = ''
      state.form.name = ''
      state.form.avatar = ''
    }  
    isModalOpen.value = false
    
    }
    return { isModalOpen, submit, state }
  },
}