I am new to using Vue and I am attempting to trigger an alert function when a button is clicked. However, I keep encountering the error message
Uncaught ReferenceError: addTask is not definedBelow are the codes I have written:
<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>
Could someone provide me with a solution to this issue and explain the cause?