video动态绑定src未触发vue的渲染

来源：8-7 文件上传组件的使用

纳兰汐枫

2020-05-07

1. 问题

视频上传成功后，对section.video赋值，未触发视频标签的显示，需要手动更改一下其他的表单值，视频才会刷新出来。

但看老师的视频，只要上传成功，为section.video赋值后，视频是立即自动加载出来的。不知这属于什么情况，该怎样处理呢？

2. 相关版本

@vue/cli 4.3.1
Chrome版本 80.0.3987.149（正式版本）（64 位）
Firefox 75
两个浏览器均存在该问题。

3. 相关代码：

3.1 section.vue

3.1.1 html

<!-- ... -->
<div class="form-group">
	<label   class="col-sm-2 control-label">视频</label>
	<div class="col-sm-10"> 
		<file v-bind:input-id="'video-upload'" v-bind:text="'上传大视频'"  
				v-bind:suffixs="['mp4']" 
                v-bind:use="FILE_USE.COURSE.key"
                v-bind:after-upload="afterUpload">
         </file>
         <div v-show="section.video"  class="row">
	         <div class="col-md-9">
	         <video  v-bind:src="section.video"  id="video"  controls="controls"></video>
             </div>
         </div>
	</div>
</div>
<!-- ... -->

3.1.2 JS

// ...
 data: function() {
            return {
                section: {},
                sections: [],
                SECTION_CHARGE: SECTION_CHARGE,
                course: {},
                chapter: {},
                FILE_USE: FILE_USE,
            }
},
// ...
  afterUpload(resp) {
      let _this = this;
      console.log("_this", _this);
      let video = process.env.VUE_APP_FILE_SERVER + resp.content.path;
      _this.section.video =  video; 
      console.log(" _this.section.video", _this.section.video);
      _this.getTime();
  },
  getTime() {
      let _this = this;
      let ele = document.getElementById("video");

       console.log("ele",ele);
      _this.section.time = parseInt(ele.duration, 10);
  },

3.2 file.vue

 uploadFile() {
 // ...
   _this.$ajax.post(process.env.VUE_APP_SERVER + "/file/admin/upload", formData).then((res)=> {
      Loading.hide();
      let resp = res.data;
      console.log("文件上传的结果：", resp);
      _this.afterUpload(resp);
      $("#" + _this.inputId + "-input").val("");
  });
 // ...
}