1、起因:使用IView的弹窗组件Modal,然后在组件里使用v-if控制Dom元素渲染,第一次打开弹窗生效,第二次打开弹窗失效的问题
2、分析:v-if的时候使用的两个条件一个是本页面的,一个是外层页面传进来的数据,导致v-if失效
失效代码简单例子如下:
<div v-if="infoData.status === 20 && formData.otherStatus === 30"> </div>
<script>
export default {
props: {
infoData: {
type: Object,
default: () => {}
}
},
data () {
return {
formData: {}
}
}
}
</script>
上面的infoData和formData对象,infoData是从外部页面传递数据进来,formData是本页面数据,应改为都用本页面数据
3、解决:改为两个都使用本页面的数据,并且在关闭弹窗的时候清空数据
更改后例子如下:
<div v-if="infoData.status === 20 && formData.otherStatus === 30"> </div>
<script>
export default {
props: {
infoModal: {
type: Object,
default: () => {}
}
},
data () {
return {
formData: {},
infoData: {}
}
},
watch: {
infoModal (val) {
this.infoData = { ...val }
}
}
}
</script>
这只是例子代码,具体逻辑可能需要根据自身情况来更正