Vue：未捕获的参考：未定义函数答案

【问题标题】：Vue: uncaught reference: function is not definedVue：未捕获的参考：未定义函数
【发布时间】：2020-05-19 02:05:07
【问题描述】：

我有一个包含表单的组件。在提交按钮上单击一个警报方法应该出现。但是，当单击按钮时，我只会在控制台中看到 Uncaught ReferenceError: greet is not defined，它会很快消失。

<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>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

发生这种情况是因为浏览器试图在全局范围内查找greet 方法，而您正在调用本机onsubmit 提交方法。您只需要使用v-on 指令将submit 事件绑定到vue 实例，例如：

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

或使用v-on 速记，例如：

<form @submit.prevent="greet">

【讨论】：

【解决方案2】：

查看事件绑定：

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

您可能希望使用 Vue 语法将 greet 函数绑定到表单，而不仅仅是通用 onsubmit。

至少可以：

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

【讨论】：

可能需要:submit.prevent="greet" 否则页面将重新加载
谢谢。答案中的代码确实有效 - 但页面会重新加载。 :submit.prevent 然而结果：error 'v-bind' directives don't support the modifier 'prevent' vue/valid-v-bind
@submit.prevent="greet"