vue.js - 表单加载时的验证错误消息

Question

关于问题

我正在使用 Laravel 5.6.7 和 vue.js。 正在使用 vee-validate 进行验证

加载表单时，它会显示验证错误消息。用户甚至没有点击提交按钮。下面是屏幕截图。

代码

<template>
    <div>
        <form role="form">                    
            <input v-validate data-vv-rules="required" type="text" 
                                                  v-model="UpdateForm.First_Name">
            <p v-if="errors.has('First Name')">{{ errors.first('First Name') }}</p>
            <button type="button">
                Update Profile
            </button>
        </form>
    </div>
</template>
<script>
    export default {
        data() {
            return { 
                UpdateForm: {
                    First_Name: ''
                }
            }
        },
        created() {
            this.GetProfile();
        },
        methods: {
            GetProfile() {
                axios.post("some api url", {}).then(response => {
                    this.UpdateForm.First_Name = response.data.Data.First_Name;
                });
            }
        }
    }
</script>

我可以去掉表单加载时的验证错误消息吗？

Answer 1

这不是预期的行为。对于初始验证，您需要使用 v-validate.initial 通知它。

也许您在声明 v-validate 时或在其他地方将此定义为发生。

Vue.use(VeeValidate);
new Vue({
  el: '#demo'
})

.is-danger{
  color: red;
}

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<div id="demo">
  <label>This one needs touching</label>
  <input type="text" name="name" v-validate="'required'">
  <div v-show="errors.has('name')" class="is-danger">Errors: {{ errors.first('name') }}</div>
  <br/>
  <label>This one does not need touching</label>
  <input name="name2" v-validate.initial="'required'" type="text">
  <div v-show="errors.has('name2')" class="is-danger">{{ errors.first('name2') }}</div>
</div>