el-radio-button切换引起的校验问题
1.问题:切换按钮时,两个校验都需要进行此时用到了对象添加属性https://cn.vuejs.org/v2/api/#vm-set里面的Vue.set( target, propertyName/index, value )Vue.delete( target, propertyName/index, value )2.参数:{Object | Array} target{stri...
·
1.问题:切换按钮时,两个校验都需要进行
此时用到了对象添加属性https://cn.vuejs.org/v2/api/#vm-set里面的
Vue.set( target, propertyName/index, value )
Vue.delete( target, propertyName/index, value )
2.参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
返回值:设置的值。
3.用法:
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
4.解读
由于 vue 无法对对象下的属性深度监听,并触发视图的变化。会导致对象已改变,但是视图界面上并没有更新的情况。
vue 在vm实例上提供了 $set方法,用于监听属性变化并更新视图。
5.使用
vm.$set(目标对象, 属性名/索引, 新值)
或this.$set(目标对象, 属性名/索引, 新值)
vm为vue实例,this指向vm
6.示例
有时候使用this.$set也不起作用,是因为target目标不正确。
比如:
let dataList = [{
isShow:false,
subList:[{
id: 1
}]
}];
this.$set(this.dataList, index, this.dataList[index]);
项目原型
data() {
var checkName = (rule, value, callback) => {
if (!value) {
return callback(new Error("阈值不能为空"));
}
setTimeout(() => {
if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
callback(new Error("请输入数字值"));
} else {
callback();
}
}, 1000);
};
rules: {
region: [{ required: true, message: "请选择项目", trigger: "change" }],
type: [
{
type: "array",
required: true,
message: "请选择版本号",
trigger: "change"
}
],
name: [{ required: true, validator: checkName, trigger: "blur" }],
singgle: [
{
type: "array",
required: true,
message: "请选择至少一个属性",
trigger: "change"
}
]
}
}
change事件
<el-form-item label="阈值分类" prop="kind">
<el-radio-group v-model="form.kind" @change="agreeChange">
<el-radio label="单阈值统计"></el-radio>
<el-radio label="多阈值统计"></el-radio>
</el-radio-group>
</el-form-item>
agreeChange() {
this.$refs["form"].clearValidate();
var checkLimit = (rule, value, callback) => {
if (!value) {
return callback(new Error("阈值区间不能为空"));
}
setTimeout(() => {
if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
callback(new Error("请输入数字值"));
} else {
callback();
}
}, 1000);
};
var checkLimits = (rule, value, callback) => {
if (!value) {
return callback(new Error("阈值区间不能为空"));
}
setTimeout(() => {
if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
callback(new Error("请输入数字值"));
} else if(value<=this.form.limit){
callback(new Error("请输入有效值"));
} else{
callback();
}
}, 1000);
};
var checkStep = (rule, value, callback) => {
if (!value) {
return callback(new Error("步长不能为空"));
}
setTimeout(() => {
if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
callback(new Error("请输入数字值"));
} else if(value>this.form.limits-this.form.limit){
callback(new Error("请输入有效值"));
} else {
callback();
}
}, 1000);
};
if (this.form.kind == "单阈值统计") {
this.$delete(this.rules, "limit", [
{ validator: checkLimit, trigger: "blur" }
]);
this.$delete(this.rules, "limits", [
{ validator: checkLimits, trigger: "blur" }
]);
this.$delete(this.rules, "step", [
{ validator: checkStep, trigger: "blur" }
]);
} else {
this.$set(this.rules, "limit", [
{ validator: checkLimit, trigger: "blur" }
]);
this.$set(this.rules, "limits", [
{ validator: checkLimits, trigger: "blur" }
]);
this.$set(this.rules, "step", [
{ validator: checkStep, trigger: "blur" }
]);
}
},
修改未点击直接校验
if (this.form.kind == "单阈值统计") {
delete this.rules.limit;
delete this.rules.limits;
delete this.rules.step;
// this.$delete(this.rules, "limit", [
// { validator: checkLimit, trigger: "blur" }
// ]);
// this.$delete(this.rules, "limits", [
// { validator: checkLimits, trigger: "blur" }
// ]);
// this.$delete(this.rules, "step", [
// { validator: checkStep, trigger: "blur" }
// ]);
} else {
this.rules.limit={ validator: checkLimit, trigger: "blur" }
this.rules.limits={ validator: checkLimits, trigger: "blur" }
this.rules.step={ validator: checkStep, trigger: "blur" }
//未点击就出来校验
// this.$set(this.rules, "limit", [
// { validator: checkLimit, trigger: "blur" }
// ]);
// this.$set(this.rules, "limits", [
// { validator: checkLimits, trigger: "blur" }
// ]);
// this.$set(this.rules, "step", [
// { validator: checkStep, trigger: "blur" }
// ]);
}
更多推荐
已为社区贡献7条内容
所有评论(0)