按一下按钮未触发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>

下面是我的方法中的提交函数。

<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>