1, in the methods of
<template>
<div>
<form
@submit="addTodo">
<input v-model="title" type="text" name="title">
<input type="submit" value="添加" class="btn">
</form>
</div>
</template>
<script>
export default {
name:'AddTodos',
data() {
return {
title:'',
}
},
methods: {
addTodo (
and
) {
e.preventDefault ()
; // cancel the default event
// this.name to get the data submitted by the form of the name field
console.log(this.title);
}
},
}
</script>
2，@submit.prevent
<template>
<div>
<form
@submit.prevent="addTodo">
<Input v-model = "title" type = "text" name = "title" placeholder = "Please add a to-do ...">
<input type="submit" value="添加" class="btn">
</form>
</div>
</template>
<script>
export default {
name:'AddTodos',
data() {
return {
title:'',
}
},
methods: {
addTodo (e) {
console.log(this.title);
}
},
}
</script>