[JavaScript知识库]v-model绑定值改变，界面不更新问题解决方法

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绑值，页面数据不刷新问题的解决方法。