Vue2中使用IView组件情况下v-if控制Dom元素失效问题

原创已于 2023-02-27 20:12:53 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#view design #javascript #前端 #vue

于 2023-02-27 20:08:21 首次发布

文章讲述了在使用IView的Modal组件时遇到的问题，即使用v-if指令控制DOM渲染在第一次打开弹窗有效，但第二次无效。问题出在v-if的条件中同时使用了父组件传递的数据和子组件自身的数据。解决方案是将所有数据改为在子组件内部管理，并在关闭弹窗时清理数据，确保每次打开时数据更新。示例代码展示了如何修改props和使用watch进行数据同步。

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>

这只是例子代码，具体逻辑可能需要根据自身情况来更正