Within my code, I am utilizing an <img> element as shown below:
<img v-bind:word = "thing" @click="action" align="center" src="../assets/pic.png"/>
Alongside, there is a method structured in this manner:
async action() {
let imgAttribute = event.target.getAttribute('word');
alert(imgAttribute ); // The alert successfully displays the value
console.log("imgAttribute : " + imgAttribute ); // The console log outputs properly
await axios.post('http://localhost:3000/my/endpoint',
{
params: {
word: imgAttribute
}
});
...
Thus, when the user clicks on the <img> element, the action method gets executed. The value of the attribute word is captured and stored in the imgAttribute variable, which is then passed as a parameter in the post request.
The fact that both alert(imgAttribute) and console.log(imgAttribute) deliver the correct values suggests that they are functioning without any issues and displaying the intended string values contained within the word attribute.
Nevertheless, upon reaching the Express server:
app.post('/my/endpoint', async (req, res) => {
const {word} = req.params; // Attempted with req.query as well but faced the same dilemma with an undefined result
console.log("word = " + word); // Outputs 'undefined'
...
Mysteriously, the word appears to be undefined at this stage.
What could be causing this issue? How can it be rectified?