vue-validate在编辑模式的⼀定报错的问题（初始化数据时机选择的不对）
场景
使⽤baianat/vee-validate 校验表单数据，在编辑模式, 即使在有数据的情况下， 还是s还有会有错误提⽰;
编辑模式的数据来源采⽤的是通过属性传递进来的
我⼀般加载数据都是在mounted的时候， 但是这次是不⾏了
分析
做过的尝试
尝试JQ的change 事件去⼿动触发input表单的变动事件
引产后多久可以怀孕尝试将item置空， this.fields.$name.changed =true
总结
上⾯的尝试都没有什么作⽤
所以只好去官⽅⽂档⾥去看了
解决
WARNING
Notice the additional checks before the actual flag check, this is becau the flags aren’t actually available until the mounted() life cycle event, so to avoid created() life cycle errors we need to add tho checks.
vue-validate 在钩⼦mounted之前是不可以使⽤的, 但是在运⾏vue-validate的时候，数据还没有来的及初始化所以把初始化的时间提前
所以调整下初始化组件数据时机 'mounted' =>'created 完美解决问题'
因为在created 解决完成原始数据的填充 但是因为还有到vue-validate的时间，我的应⽤场景 ：数据实际渲染的时候是很短的，所以created是⾜够的
案列
<template>
<div class="panel panel-default">
<div class="panel-heading">
<span >编辑⾓⾊</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 >{{ msg_respon }}</p>
<button v-on:click="cloModel()"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">
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">
ps图层解锁
</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-lect:options="list_level"v-model="level":placeholder="placeholder_level"></v-lect>
</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_respon : '',
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() {
祥子的结局le_obj = JSON.le);
this.name = le_obj.name;
this.name = le_obj.name;
this.slug = le_obj.slug;
this.description = le_obj.description;
let level = le_obj.level);
this.level = { label: level , value : level};
},
// 关闭模态框
cloModel : function(){
this.$dal_prompt.clo();
// 创建成功则跳转到列表
羊驼乐队
if (this.icon_type === 'success') {
place('/Role');
}
},
// 新建⾓⾊
editRole: function() {
let params = {
公元208年name: this.name,
赵孟頫楷书slug: this.slug,
description: this.description,
level: this.level.value,
role_id : le_obj.id
};
let url = '/api/role/edit';
// 存储⾓⾊
let vm = this;
this.$http.post(url, params, {responType: 'json'}).then(function(respon) { console.log(respon);
if (respon.body.status === 0) {
vm.msg_respon = '⾓⾊"' + vm.name +'" 编辑成功';
} el {
vm.msg_respon = respon.body.msg;
vm.icon_type = 'error';
}
vm.$dal_prompt.open();
});
}
}
}
</script>
<style scoped>
</style>
