首页 > 解决方案 > Vue JS:TypeError:无法读取未定义的属性“preventDefault”

问题描述

我在输入字段中使用了 v-model,但它给出了未定义的 preventDefault 错误。我在这里想念什么?

我的 AddUser 组件上有以下代码。

<template>
    <form @submit="onSubmit()">
        <div class="form-group">
            <input type="text" v-model="name" name="name" class="form-control" placeholder="Enter name">
        </div>
        <div class="form-btn form-group text-center">
            <Button type="submit" text="Add" color="#2BA0A3" />
        </div>        
    </form>
</template>

<script>
import Button from './Button'
export default {
    name: 'AddUser',
    data(){
        return {
            name: ''
        }
    },
    components: {
        Button
    },
    methods: {
        onSubmit(e){ 
            e.preventDefault()
            if(!this.name){
                alert('Please enter name.')
            }
        }
    }
}
</script>

标签: vue.js

解决方案


采用

@submit="onSubmit" 而不是 @submit="onSubmit()"

我认为它会解决这个问题。


推荐阅读