Vue.js“ @ click.prevent”隐藏了HTML“ required”属性默认验证消息（请填写该字段。）

Question

如果我使用"@click.prevent"，当用户按下带有空白字段的"Add User"按钮时，不会收到此消息（请填写此字段。）

但是只有"@click"可以正常工作。如何通过“ @ click.prevent”获得此消息？

  <div class="modal-body p-4">
                    <form action="#" method="POST">
                        <div class="form-group">
                            <input type="text" name="name" class="form-control form-control-lg" placeholder="Name"
                                required v-model="newUser.name">
                        </div>
                        <div class="form-group">
                            <input type="email" name="email" class="form-control form-control-lg"
                                placeholder="Email" required v-model="newUser.email">
                        </div>
                        <div class="form-group">
                            <input type="tel" name="phone" class="form-control form-control-lg" placeholder="Phone"
                                required v-model="newUser.phone">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-info btn-block btn-lg" @click="addDataIfValid('insert')">Add
                                User</button>
                        </div>
                    </form>
  </div>

Answer 1

选中https://vuejs.org/v2/cookbook/form-validation.html，了解如何进行表单验证。

您不应该将处理程序添加到按钮@click上，而要形成@submit事件