v-model绑定值改变,界面不更新问题解决方法

原因:Vue在初始化实例的时候会对属性执行getter/setter转化,所以只有在data中声明了的对象属性v-model的双向数据绑定才会有效

// 实例化一个Vue对象,data中object.a 是双向绑定的
var vm = new Vue({
	data: {
		object: {
			a: '1'
		}
	}
})

// 假如html中v-model="object.b"
// 在js中进行如下赋值,
this.object.b = '1'

解决方案:

方案一:添加属性从而触发v-model的双向数据绑定

1. Vue.set(object, key, value)
例: Vue.set(vm.object, 'b', '1')

2. 使用$set实例方法,参数与方法1相同
例:this.$set(this.object, 'b', '2')

3. 使用Object.assign(target, object...)  参数说明:第一个为目标对象,后面的是传入对象,同属性名后面的会覆盖前面的对象属性值
例:this.object.b = '2';
   this.object = Object.assign({}, this.object)
注:这种方法相当于将数据拷贝,即改变object这个对象的指针从而触发更新

方案二:赋值完成后进行页面刷新

1. this.$forceUpdate()   // 该方法会进行页面强制刷新

2. this.$nextTick() + v-if  // 等待所有DOM元素更新完毕之后再次进行一次页面刷新

html:
<template v-if="refresh">  // 在元素上绑定一个用于判断的值,布尔类型即可
	...包含的元素
</template>

js:
data() {
	return {
		refresh: true
	}
}
methods: {
	fresh() {
		this.refresh = false;
		this.$nextTick(() => {
			this.refresh = true
		})
	}
}
在需要刷新的时候调用一下this.fresh()就可以手动实现一次页面的刷新了。

以上便是个人总结的一些关于v-model绑值,页面数据不刷新问题的解决方法。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐