1

I've just recently started learning Vue.JS. I'm trying to make a simple MEVN to-do list app to understand how it works, but whenever I try to send a POST to my express server it just tells me:

TypeError: Cannot read properties of undefined (reading 'TodoItem')

Can anyone tell me what I'm doing wrong? When I console log the todo item before sending it, it logs whatever I'm sending.

Todo.vue

<template>
    <div>
        <form @submit.prevent="createPost">
            <div>
                <label for="todoItem">Todo Item</label>
                <input type="text" id="todoItem" v-model="todoItem">
            </div>
            <button>Create Post</button>
        </form>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: "Todo",
    data() {
        return {
            todoItem: ''
        }
    },
    methods: {
        createPost() {

            console.log("Sending: " + this.todoItem)

            axios.post("http://[SERVER]/todo", this.todoItem)
                .then((response)=> console.log(response))
                .catch((error)=> console.log(error))
        }
    }
}

</script>

server.js

const express = require("express")
const bodyParser = require("body-parser")
const app = express()

app.set(bodyParser.json())
app.set(bodyParser.urlencoded({extended: true}))

app.get("/", (req, res)=> {
    res.send("Hello, World!")
})

app.post("/todo", (req, res)=> {
    const todoItem = req.body.todoItem

    console.log(todoItem)

    res.status(200)
    res.json({
        message: "success"
    })
})

app.listen(3000, "0.0.0.0", ()=> {
    console.log("Server is up and running.")
})

Edit: I followed Teddy's answer and now I'm getting this error from Vue.JS https://i.imgur.com/zq2W2AR.png

Gabriel Gavrilov
  • 45
  • 5

1 Answers1

1

Your post payload is just "the item text"

It seems you are expecting payload to be { todoItem: "item text" }

If this is the case, while sending, you have to send it like

axios.post("http://[SERVER]/todo", {'todoItem':this.todoItem})

Either that, or, store it differently inside data

Like...

return {
        todoItem: {
            todoText: ''
         }
    };

And then change your v-model to match the new structure:

<input type="text" id="todoItem" v-model="todoItem.todoText">

Now that you fixed the data structure, you can just send todoItem

axios.post("http://[SERVER]/todo", this.todoItem)

But, on the server side, the text is called as 'todoText' now

const todoItem = req.body.todoText //Because req.body itself is todoItem
Teddy
  • 4,009
  • 2
  • 33
  • 55
  • Thanks for the answer, unfortunately, it did not fix the problem. Now I don't get any response from express at all. Here is a screenshot of the problem: https://i.imgur.com/zq2W2AR.png – Gabriel Gavrilov Aug 23 '23 at 17:56
  • Your server CORS setting is not allowing your UI to talk to it. You may have to allow CORS for "*" (all hosts) or "localhost" in your Express server. – Teddy Aug 23 '23 at 18:05
  • Browser automatically checks with server and gets permission via CORS before invoking the actual API. – Teddy Aug 23 '23 at 18:05
  • Refer: https://stackoverflow.com/a/46954055/1364747 – Teddy Aug 23 '23 at 18:08