VUEJS 提交事件未在按钮单击时触发

Question

我想提交一个表单并在控制台记录它的数据，但是每次我点击提交按钮时，什么都没有发生，甚至控制台中的错误也没有。 PS：我正在使用 vuelidate 进行表单验证和顺风。下面是表单的代码：

<form @submit.prevent="submit">
<div class="flex flex-1 flex-col" :class="{ 'input--error': $v.form.first_name.$error }">
  <label for="first-name" class="block mb-1 text-sm font-sofiaRegular font-medium text-gray-700">First name</label>
<input type="text" v-model="form.first_name" @blur="$v.form.first_name.$touch()" class="bg-gray-200 text-gray-500 text-sm font-sofiaRegular border-none rounded shadow-sm focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500 focus:ring-opacity-40">

<div class="error" v-if="!$v.form.first_name.required && $v.form.first_name.$dirty">Field is required</div>
</div>

<div class="flex flex-1 flex-col" :class="{ 'input--error': $v.form.middle_name.$error }">
 <label for="middle-name" class="block mb-1 text-sm font-sofiaRegular font-medium text-gray-700">Middle name</label>
<input type="text" v-model="form.middle_name" @blur="$v.form.middle_name.$touch()"
  class="bg-gray-200 text-gray-500 text-sm font-sofiaRegular border-none rounded shadow-sm focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500 focus:ring-opacity-40">

<div class="error" v-if="!$v.form.middle_name.required && $v.form.middle_name.$dirty">Field is required</div>
</div>

<div class="flex flex-1 flex-col" :class="{ 'input--error': $v.form.last_name.$error }">

<label for="last-name" class="block mb-1 text-sm font-sofiaRegular font-medium text-gray-700">Last name</label>
<input type="text" v-model="form.last_name" @blur="$v.form.last_name.$touch()" 
class="bg-gray-200 text-gray-500 text-sm font-sofiaRegular border-none rounded shadow-sm focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500 focus:ring-opacity-40">

<div class="error" v-if="!$v.form.last_name.required && $v.form.last_name.$dirty">Field is required</div>
</div>

<button type="submit" class="text-sm font-medium tracking-wide px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Send</button>


</form>

还有，这是我的方法中的 submit 函数。

<script>

...
   data() {
        return {
            form: {
                first_name: '',
                middle_name: '',
                last_name: ''
            },
        }
    },
     methods: {
        submit() {
            // collect form data
            const application = {
                first_name: this.form.first_name,
                middle_name: this.form.middle_name,
                last_name: this.form.last_name
            }
        
            console.log("Apply form Data: ", application)
        }
    },
...
</script>

Answer 1

所以，问题是我在表单标签之外有提交按钮，真是个愚蠢的疏忽！

<form @submit.prevent="submit"></form>
<button class="...">Send</button>