vue-validate 在编辑模式的一定报错的问题(初始化数据时机选择的不对)

场景

• 使用baianat/vee-validate 校验表单数据,在编辑模式, 即使在有数据的情况下， 还是this.errors还有会有错误提示;
• 编辑模式的数据来源 采用的是通过属性传递进来的
• 我一般加载数据都是在mounted的时候， 但是这次是不行了

分析

• 做过的尝试
  
  • 尝试JQ的change 事件去手动触发input表单的变动事件
  • 尝试将this.error.item置空， this.fields.$name.changed =true
• 总结
  
  • 上面的尝试都没有什么作用
• 所以只好去官方文档里去看了

解决

• 
  
• 官方文档中找到了解决方法
  

WARNING
Notice the additional checks before the actual flag check, this is because the flags aren’t actually available until the mounted() life cycle event, so to avoid created() life cycle errors we need to add those checks.
vue-validate 在钩子mounted之前是不可以使用的, 但是在运行vue-validate的时候，数据还没有来的及初始化 所以把初始化的时间提前

所以调整下初始化组件数据时机 'mounted' =>'created 完美解决问题'
因为在created 解决完成原始数据的填充 但是因为还有到vue-validate的时间，我的应用场景 :数据实际渲染的时候是很短的，所以created是足够的

案列

<template>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span style="font-weight: bold;">编辑角色</span>
            <span class="pull-right"><a href="/Role" class="btn btn-xs btn-info">角色列表</a></span>
        </div>
        <div class="panel-body">
            <sweet-modal :icon="icon_type" ref="modal_prompt" overlay-theme="dark" modal-theme="dark">
                <p style="white-space: pre-line">{{ msg_response }}</p>
                <button v-on:click="closeModel()" class="btn btn-primary pull-right">确认</button>
            </sweet-modal>
            <div class="form-horizontal">
                <div class="form-group">
                    <span v-show="errors.has('name')" class="alert-danger">{{ errors.first('name') }}</span>
                    <label for="name" class="col-sm-2 control-label">角色名称</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="name" data-vv-as="角色名称"
                               v-validate.initial="'required'" data-vv-name="name" v-model="name">
                    </div>
                </div>
                <div class="form-group">
                    <span v-show="errors.has('slug')" class="alert-danger">{{ errors.first('slug') }}</span>
                    <label for="slug" class="col-sm-2 control-label">Slug</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="slug" v-model="slug" data-vv-as="唯一标识"
                               v-validate.initial="'required'" id="slug">
                    </div>
                </div>
                <div class="form-group">
                    <label for="slug" class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-6">
                        <textarea v-model="description" class="form-control" data-vv-name="description"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">级别</label>
                    <div class="col-sm-6">
                        <v-select :options="list_level" v-model="level" :placeholder="placeholder_level"></v-select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8">
                        <button class="btn btn-primary  btn-sm pull-right" @click.prevent="editRole">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { SweetModal, SweetModalTab } from 'sweet-modal-vue';
    export default {
        name: "RoleEdit",
        props:['role'],
        data: function () {
            return {
                role_obj : {},
                msg_response : '',
                icon_type : 'success',

                name: '',
                slug: '',
                description: '',
                level: {label: '1', value: 1},
                list_level: [
                    {label: '1', value: 1},
                    {label: '2', value: 2},
                    {label: '3', value: 3},
                    {label: '4', value: 4},
                ],
                placeholder_level : '级别'
            }
        },
        created () {
            // 初始化组件
            this.initComponent();
        },
        methods: {
            // 初始化参数
            initComponent() {
                this.role_obj = JSON.parse(this.role);
              this.name = this.role_obj.name;
              this.slug = this.role_obj.slug;
              this.description = this.role_obj.description;
              let level = parseInt(this.role_obj.level);
              this.level = { label: level , value : level};
            },

            // 关闭模态框
            closeModel : function(){
                this.$refs.modal_prompt.close();

                // 创建成功则跳转到列表
                if (this.icon_type === 'success') {
                    window.location.replace('/Role');
                }
            },

            // 新建角色
            editRole: function () {
                let params = {
                    name: this.name,
                    slug: this.slug,
                    description: this.description,
                    level: this.level.value,
                    role_id : this.role_obj.id
                };
                let url = '/api/role/edit';

                // 存储角色
                let vm = this;
                this.$http.post(url, params, {responseType: 'json'}).then(function (response) {
                    console.log(response);
                    if (response.body.status === 0) {
                        vm.msg_response = '角色"' + vm.name +'" 编辑成功';
                    } else {
                        vm.msg_response = response.body.msg;
                        vm.icon_type = 'error';
                    }
                    vm.$refs.modal_prompt.open();
                });
            }
        }
    }
</script>

<style scoped>

</style>