vue 使用 this.$forceUpdate()页面没有刷新

最新推荐文章于 2024-05-15 11:16:56 发布

原创最新推荐文章于 2024-05-15 11:16:56 发布

· 8.1k 阅读

4 ·

版权

文章标签：

#vue #html5 #javascript

笔记专栏收录该内容

31 篇文章

订阅专栏

本文介绍了解决Vue.js项目中v-model值更新但页面显示未同步的问题。通过使用子组件触发父组件重新渲染的方式，确保视图及时更新。文章详细展示了如何利用v-bind:key属性触发Vue的diff机制，实现页面的正确更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所遇问题：

使用了select、input组件,v-model后值更新了，页面数据未同步
@change事件调用this.$forceUpdate()，没有效果

解决办法：强制组件重新渲染

// 封装个forceUpdate方法
// 子组件在@change调用 this.$emit('forceUpdate')
// 父组件：
<Son  :key="refresh"  @forceUpdate="_forceUpdate" />
//================
data() {
	return{
		refresh:-1;
	}
},
methods:{
	_forceUpdate(){
		this.refresh = Math.random() ;
	 }
}
// 总结：v-bind key或者v-if 或其他xx都可以，能够触发vue的diff就行