Vue: uncaught reference: function is not defined

Question

I have a component that contains a form. On submit button click an alert method should appear. However when the button is clicked I only get a Uncaught ReferenceError: greet is not defined in console which disappears very quickly.

<template>
    <div class="text-breakdown">
        <h3 class = "title">Text Breakdown</h3>

        <form onsubmit="greet()">
            <textarea type="text" id = "breakdown-text"
                  placeholder="Enter your text here">
            </textarea>

            <button class = "custom-button dark-button"
                    type="submit">Breakdown</button>
        </form>
    </div>


</template>

<script>
    import axios from 'axios';

    export default  {
        methods:  {
            greet()  {
                alert("Hello!");
            }
        }
    }

</script>

tony19 · Accepted Answer · 2022-07-16 03:26:35Z

1

This is happening because the browser is trying to find the greet method in global scope as you are calling a native onsubmit submit method. You just need to bind the submit event to vue instance using v-on directive like:

<form v-on:submit.prevent="greet">

Or use the v-on shorthand like:

<form @submit.prevent="greet">

edited Jul 16, 2022 at 3:26

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 18, 2020 at 18:05

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 01:47:03Z

1

Review the event bindings:

https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

You will probably want to bind your greet function to the form using Vue syntax and not just generic onsubmit.

At a minimum it could be:

<form :submit="greet"> .... </form>

edited Jul 15, 2022 at 1:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 18, 2020 at 17:57

Cody Caughlan

32.8k5 gold badges67 silver badges68 bronze badges

3 Comments

squareborg Over a year ago

probably want :submit.prevent="greet" or the page will reload

parsecer Over a year ago

Thank you. The code in the answer does work - but the page does reload. :submit.prevent however results in: error 'v-bind' directives don't support the modifier 'prevent' vue/valid-v-bind

squareborg Over a year ago

@submit.prevent="greet"

Collectives™ on Stack Overflow

Vue: uncaught reference: function is not defined

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related