Vue某些情况下 v-model绑定数据不实时更新解决办法
有的时候我们变化data内的内容，console.log打印的时候是显示已经变化了的，但并没有渲染到界面上去。受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
具体请戳深入响应式原理
下面我们来说解决方法，其实找到原因后解决起来就很容易了（我们数学老师经常说万事开头难(∩_∩)）。
情况一：简单的数据展示上不刷新
1.$set()方法重新渲染
this.$set(this.student,"age", 24)
//this.student为你在data中声明的数组名，‘age’是你要改变的数组下的指定字段名，24是你要变化的值- 1
- 2
2.深拷贝
let name2 = JSON.parse(JSON.stringify(this.name));
//执行完业务代码后
this.name = name2- 1
- 2
- 3
- 4
情况二：vue video src改变 视频展示区不刷新
1.不绑定source标签里的src属性，而绑定video标签中的src属性。
<video v-if="!imageName" id="video" controls="controls" width="400" height="300" :src="uploadFile" alt="视频加载失败">
<!-- <source :src="uploadFile" alt="视频加载失败"/> -->
</video>- 1
- 2
- 3
2.this.n e x t T i c k ( ) 一 开 始 ， 用 v − i f 将 v i d e o 元 素 隐 藏 ， 当 s r c 值 改 变 的 时 候 ， 为 获 取 更 新 后 的 D O M ， 将 s h o w V i d e o 变 为 t r u e 的 方 法 放 在 t h i s . nextTick() 一开始，用v-if将video元素隐藏，当src值改变的时候，为获取更新后的DOM，将showVideo变为true的方法放在this.nextTick()一开始，用v−if将video元素隐藏，当src值改变的时候，为获取更新后的DOM，将showVideo变为true的方法放在this.nextTick()中，触发浏览器的重排，可以使浏览器重新读取source元素的src值，重新获取视频资源。这种方法，适用于有在视频区域上覆盖图片的产品需求。
<template>
<div id="login">
<div>登录页面</div>
<div class="video">
<div class="videoChild" @click="disappearMask" v-show="showMask"></div>
<video v-if="showVideo" preload="auto" controls>
<source :src="`../../static/${currentSrc}.mp4`" type="video/mp4">
</video>
</div>
<p class="btns">
<button @click="beforeOne" :class="{active: selfNum === 0}">上一个</button>
<button @click="afterOne" :class="{active: selfNum === 1}">下一个</button>
</p>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
srcArr: ['company', 'self'],
currentSrc: 'company',
showVideo: false,
showMask: true,
selfNum: 0
}
},
methods: {
beforeOne () {
this.currentSrc = this.srcArr[0]
this.selfNum = 0
this.showMask = true
this.showVideo = false
},
afterOne () {
this.currentSrc = this.srcArr[1]
this.selfNum = 1
this.showMask = true
this.showVideo = false
},
disappearMask () {
this.showMask = false
}
},
mounted: function () {
this.currentSrc = this.srcArr[0]
},
watch: {
currentSrc () {
this.$nextTick(() => {
this.showVideo = true
})
}
}
}
</script>
<style scoped lang="less">
#login{
.video{
width: 400px;
height: 300px;
position: relative;
video{
width: 400px;
height: 300px;
}
.videoChild{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 300px;
background: aqua;
z-index: 1000;
}
}
.btns{
.active{
color: red;
}
}
}
</style>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/10/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
