Setup function says object is not defined, even tough it is defined in the function and is being returned

Question

It says that the newBlog is not defined but I am returning it from the setup function and using it in the event handler function I don't understand what the issue might be?

<template>
  <form @submit="onSubmit" class="add-form">
     ...
  </form>
</template>

<script>
import { ref } from '@vue/reactivity'
    export default {
        setup() {
            const title = ref('')
            const body = ref('')
            
            const onSubmit = (e) => {
                e.preventDefault()

                const newBlog = {
                    title: title,
                    body: body
                }

                this.$emit('add-blog', newBlog)

                title.value = ''
                title.body = ''
            }
            return { title, body, onSubmit, newBlog }

        }
    }
</script>

Answer 1

newBlog is declared inside the onSubmit function, and it's not accessible outside of that scope, leading to the error you observed.

To fix the issue, move the newBlog declaration outside onSubmit:

export default {
  setup() {
    //...

    const newBlog = {...}

    const onSubmit = (e) => {
      this.$emit('add-blog', newBlog)
    }

    return { title, body, onSubmit, newBlog }
  }
}