Vue某些情况下 v-model绑定数据不实时更新解决办法

kirin

发布于 2020-10-29 15:23:19

5.5K1

发布于 2020-10-29 15:23:19

有的时候我们变化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是你要变化的值

2.深拷贝

let name2 = JSON.parse(JSON.stringify(this.name));
//执行完业务代码后
this.name = name2

情况二：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>

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 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度