Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Axios Vue: undefined post parameters in express server but defined in Vue

I have an <img> element like this:

<img v-bind:word = "thing" @click="action" align="center" src="../assets/pic.png"/>

and a method like this:

 async action() {
      let imgAttribute = event.target.getAttribute('word');
      alert(imgAttribute ); // alerts OK
      console.log("imgAttribute : " + imgAttribute ); // prints OK

     await axios.post('http://localhost:3000/my/endpoint',
         {
           params: {
             word: imgAttribute 
           }
         });
...

So when the <img> element is clicked, the method action is executed. The word attribute is taken and put in imgAttribute variable, which is then passed as a parameter in the post request.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

alert(imgAttribute) and console.log(imgAttribute) work fine, which means they don’t print undefined, but print correct string values that are inside word attribute.

However on Express server:


app.post('/my/endpoint', async (req, res) => {
    const {word} = req.params;  // tried req.query with the same (undefined) result
    console.log("word = " + word); // undefined
...

The word is undefined.

Why does it happen? How do I fix it?

>Solution :

You passed as body via .post, to pass as params use

  await axios({
    url: 'http://localhost:3000/my/endpoint',
    method: 'post',
    params: {
        word: imgAttribute 
    }
  })
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading