项目场景:
表单校验。表单使用v-if
判断回显数据导致表单不能编辑。
问题描述
表单校验,下拉框
选项用v-if
控制其他的值是否显示。新增没有问题。数据回显时候,在切换下拉框
数据时候,v-if
控制的值无法修改并且校验不会通过。(使用v-show
,隐藏效果能实现。但该属性的校验并没消失会一直存在)
原因分析:
<template>
<div class="app-container">
<el-form ref="form" :model="form" label-width="130px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="选择选项" prop="checkVal">
<el-select
v-model="form.checkVal"
filterable
placeholder="请选择选项"
>
<el-option
v-for="item in checkValList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="form.checkVal== 1"
label="选项1的值"
prop="checkOne"
>
<el-input
v-model="form.checkOne"
placeholder="请输入值"
/>
</el-form-item>
<el-form-item
v-if="form.checkTwo== 2"
label="选项2的值"
prop="checkTwo"
>
<el-input
v-model="form.checkTwo"
placeholder="请输入值"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
// 表单模块
form: {
name: "",
checkVal: "",
checkOne:"",
checkTwo:"",
},
checkValList:[
{label:'1',value:'1'},
{label:'2',value:'2'},
]
};
},
};
</script>
数据回显的时候,Vue创建form表单实例的时候,v-if
控制隐藏的属性没有添加到实例上面,导致数据不能双向绑定。并且不能触发视图更新。
解决方案:
在项目回显的时候,把
v-if
控制的隐藏属性全部添加到form
上面
<script>
export default {
data() {
return {
// 表单模块
form: {
name: "",
checkVal: "",
checkOne:"",
checkTwo:"",
},
checkValList:[
{label:'1',value:'1'},
{label:'2',value:'2'},
]
};
},
methods: {
/** 修改按钮操作 获取值之后 */
handleUpdate(row) {
// 根据自己的后台接口返回的数据
var data = {...}
this.form = data
// 进行判断,判断返回数据里面有没有v-if控制的属性,如果没有,手动添加到实例上面
if (this.form.checkOne == undefined) {
this.$set(this.form, "checkOne", "");
}
if (this.form.checkTwo == undefined) {
this.$set(this.form, "checkTwo", "");
}
},
};
</script>