对接数据时或许会碰到已赋值但页面未更新问题,不防试试
1、
this.$set(object, key, value) //向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新
例:
this.$set(this.newData,'name','liya')
相当于 this.newData.name = 'liya'
2、若页面已渲染但数据还是未更新:
<audio>
<source
:src="playAudio.src"
v-if="!empty(playAudio.src)"
/>
</audio> //playAudio.src不为空则显示此标签
其中empty方法是在main.js里写的用于判断数据是否为空的方法
3、
this.$forceUpdate() //迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
关于empty函数:
Vue.prototype.empty = function (obj) {
/** 判断是否为空 **/
// console.log(null instanceof Object)
var flag = false
if ((typeof obj) === 'string') {
if (obj === '') {
flag = true
} else if (obj === 'null') {
flag = true
}
} else if ((typeof obj) === 'number') {
if (obj === 0) {
flag = false
}
} else if ((typeof obj) === 'boolean') {
flag = obj
} else if ((typeof obj) === 'undefined') {
flag = true
} else if ((typeof obj) === 'object') {
if (obj instanceof Array) {
if (obj.length === 0) {
flag = true
}
} else if (obj instanceof Object) {
if (Object.keys(obj).length === 0) {
flag = true
}
} else if (obj == null) {
flag = true
}
}
return flag
}