this.$http.post and this.$http.patch not passing on payload for req.body to detect

[tommyhpersonal]

Hi i'm having an issue where whenever I do a post request i can't pass the body along with it.

await this.$http.patch("http://localhost:3000/api/tasks/${task.id}",{task:"rando info here"})

and in my express server it looks like this
#/app.js
app.use(express.json({strict:false}));
app.use(bodyParser.urlencoded({ extended: true }));
app.use('/tasks', taskRouter)

and in my
#routes/tasks.js
router.patch('/:taskId', function(req,res,next){
console.log(req.body)
#a bunch of sql related code
})

just so I can see what's going on.

[atinux]

@tommyhpersonalhave you tried:

await this.$http.patch(`/api/tasks/${task.id}`, {
  json: { task:"rando info here" }
})

[tommyhpersonal]

@atinux Just tried that. That doesn't seem to work.

Weirdest thing is that it was working a couple months back, but out of nowhere it just stopped working.

[Geminii]

Hi @tommyhpersonal
Can you reproduce a simple codesandbox ?
Do you have upgrade to latest http dependency ? What is your previous version ?

[tommyhpersonal]

My previous version was one of the 0.2.x versions. It's definitely something wrong with my code. When I made a new version to test it out, I couldn't reproduce the error.

I guess I'll have to keep debugging, but thanks for the help!

[Geminii]

@tommyhpersonal hope you will fix it ;)
you can close your issue and maybe reoponed it if the problem persist with code reproduction :)

[tommyhpersonal]

That was a really fast reply thank you @Geminii .

I just figured out what the issue was in my code.

Do you know if I can put a this.$http.patch('apiurl', payload) inside a method?

My code currently looks like

  <input type="button" value="Click me" @click="updateCompleted()">

  methods:{
    updateCompleted: async function(){
      var payload = {completed: 0}
      await this.$http.patch(`http://localhost:3000/api/tasks/4`,payload)
      await this.$http.$get('`http://localhost:3000/api/tasks/4')
    }
  }

if I were to put it in the below code, it would work fine

async(){
      var payload = {completed: 0}
      await this.$http.patch(`http://localhost:3000/api/tasks/4`,payload)
      await this.$http.$get('`http://localhost:3000/api/tasks/4')
} 

[Geminii]

In view of the PATCH documentation, you can pass a payload in the second argument :)

In you want to use it into asyncData, you probably need this code to do this :

async asyncData({ $http }) {
  const payload = { completed: 0 }
  await this.$http.patch(`http://localhost:3000/api/tasks/4`, payload)
  const task = await $http.$get('http://localhost:3000/api/tasks/4')
  return task.json()
}

But if you need it into methods, your code is exact 👍
Don't hesitate if you need some other help 😀

[tommyhpersonal]

Thanks for your help @Geminii !

I took a look at that document. I really need it in the methods part of the instance rather than the asyncData part since it's triggered by a click on the page.

It doesn't seem to pass on the payload. It returns {} when I do a console.log(req.body).

Anyways. I got tired of trying to fix it, so in the mean time i'm going to use the axios module. Hopefully this will be resolved in a future update. (Or maybe i'm just doing something wrong in my code)

My "it works, so it's good enough" solution for anyone else who might need it in the future:

  methods:{
    updateCompleted: async function(){
      var payload = {completed: 0}
      await this.$axios.patch(`http://localhost:3000/api/tasks/4`,payload)
      await this.$http.$get('`http://localhost:3000/api/tasks/4')
    }
  }