动态改变v-if和v-show绑定值无响应问题
- 描述
在v-for循环体中的元素使用v-if或者v-show并绑定变量控制元素显示与隐藏时，动态改变绑定值（true or false）,发现元素并没有随绑定值改变而作出响应。 - 原因分析
出现这种情况的原因是：改变v-if和v-show绑定值后页面并没有重新渲染所以任然是之前的状态。 - 解决方案
网上的解决方案是需要对绑定值进行深度赋值但是这里并没有成功解决问题，代码如下：
Vue.set(this.flagList,index,!this.flagList[index])
this.$set(this.flagList,index,!this.flagList[index]) //和上面等价既然页面并没有随动态值改变而重新渲染，那我们就强制进页面的重新渲染，代码如下：
this.$forceUpdate()在v-for循环体中使用el-form表单调用$refs方法问题
- 描述
当在v-for中使用element的表单组件时，调用el-form组件的this.$refs方法时，例如：this.$refs['name'].resetFields()方法报方法没定义 - 解决方案
出现这个问题是调用方法的方式有问题，正确的调用方式还需要在$refs['']后面加上索引（第几个表单）即this.$refs'name',例如提交表单时的验证：
//index为循环体的索引号
submit(index){
this.$refs['myForm'][index].validate((valid){
if(valid){
}
})
}对el-form-item中有多个输入框或者有输入框有下拉框的校验
- 描述
有时在el-form表单的一行中有多个控件，例如一个下拉框和一个输入框此时需要对下拉框和输入框都需要做校验，普通的表单校验操作无法满足需求。 - 解决方案
这里给出两种方案
方案一
使用嵌套的el-form-item即可解决，代码如下：
<el-form-item label='父级' required>
//这里需使用div包裹el-form-item并横向布局
<div class='flex-row'>
<el-form-item label='son1' prop='son1'>
<el-select v-model='aa'>
<el-option v-for="(item,index) in array" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label='son2' prop='son2'>
<el-input v-model="bb"></el-input>
</el-form-item>
</div>
</el-form-item>下面只需要把prop的属性值添加到校验规则rules对象中即可。
方案二
使用自定义校验规则的方法，代码如下
html布局：
<el-form-item prop="value1" label="添加方式：">
<el-select v-model="addForm.value1">
<el-option v-for="(item,index) in dataOptions" :key="index" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-input v-model="addForm.value2"></el-input>
</el-form-item>js代码：
export default{
data(){
let checkvalid=(rule,value,callback)=>{
let value2=this.$refs.value2.value
if(value1&&value2){
callback()
}else{
if(!value1){
callback(new Error('请选择value1'))
}
if(!value2){
callback(new Error('请输入value2'))
}
}
}
return{
rules:{
value1:[{required:true,validator:checkvalid,trigger:'change'}]
}
}
}
}