我的“alret()”函数在 vuejs 中不起作用答案

【问题标题】：My "alret()" function is not working in vuejs我的“alret()”函数在 vuejs 中不起作用
【发布时间】：2021-01-02 21:46:53
【问题描述】：

我是 vue 的初学者，并尝试在单击按钮时执行警报功能，但我得到的错误是 Uncaught ReferenceError: addTask is not defined

这是我的代码：-

<template>
    
    <div class="col-md-8 mt-4">
        <div class="card card-default">
            <div class="card-header">
                Task Form
            </div>
            <div class="card-body">
                <form action="./api/task" method="POST" onClick="addTask">
                    
                    <div class="form-group">
                        <input type="text" name="title" placeholder="Task title" class="form-control">

                        
                    </div>
                    <input type="submt" value="Add Task" class="btn btn-info">
                </form>
                
            </div>
            
        </div>
        
    </div>
</template>

<script >
    
    export default {
        mounted() {
            console.log('component mounted.')
        },

        methods: {
            addTask(){
                alert('Adding The Task');
            }
        }
    }

</script>

谁能告诉我解决方法并解释原因。

【问题讨论】：

onClick="addTask" 要使其工作， addTask 需要是一个全局方法... v-on:click="addTask" 可以做你想做的 - 老实说，你的代码看起来你没有使用任何标记中根本没有 vuejs - 那么，为什么要打扰 vuejs
见vuejs.org/v2/guide/events.html。另外，你想要type="submit"，而不是type="submt"
@JaromandaX 你能回答这个问题，以便我可以关闭它。
为什么要关闭它？只需将答案（一旦我发布）标记为已接受
@JaromandaX 是的，这就是我所说的“结束问题”的意思。

标签： javascript vue.js laravel-8

【解决方案1】：

onClick="addTask" 要使其工作，addTask 需要是一个全局方法

改为使用 vuejs

v-on:click="addTask"

或

@click="addTask"

【讨论】：