vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？

场景：在一个视频列表页面，点击视频列表，则全屏播放视频。全屏播放是一个公用组件，每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签，如下：

<video controls="controls" :poster="videoThumb" playsinline id="playVideos"><source :src="videoUrl" type="video/mp4"/>
</video>

this.videoUrl = url;
this.videoThumb = thumb;

结果：第一次播放没有问题，从第二次开始仍然播放的是第一次播放的视频。

分析：vue绑定video标签的src属性无效，可以通过给DOM的src属性赋值，方法如下：

let videos = document.getElementById('playVideos');
videos.src = url;

vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？相关推荐

如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
vue中props的双向绑定
在vue的学习中,一开始我是自己写组件练手的,在这个过程中我遇到一个问题: props:父组件传递给子组件参数 (1)props直接在子组件里直接使用是可以实时更新的 (2)props如果在creat ...
微信小程序中的数据双向绑定
前言微信小程序因为诸多限制所以它无法像 vue 那样通过指令进行数据绑定,那微信小程序有没有什么办法可以实现数据的双向绑定呢?今天给大家分享两种微信小程序数据绑定的方法. 通过 model:valu ...
深入ASP.NET数据绑定（中）——数据双向绑定机理
转载自阿不 http://hjf1223.cnblogs.com/ 在上一篇<深入ASP.NET数据绑定(上)>中,我们分析了在.NET中的数据绑定语法的一些内部机理.简单说来就是ASP ...
vue中的数据单向绑定，判断，循环，函数
vue基本语法 1. 前言 2. 数据绑定v-bind 3. v-if || v-else-if || v-else 条件判断 4. v-for 循环 5. v-on 元素监听事件 1. 前言 vue ...
vue中如何实现双向绑定
双向绑定的需要在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显 ...
【阿不】深入ASP.NET数据绑定（中）—数据双向绑定机理
在上一篇<深入ASP.NET数据绑定(上)>中,我们分析了在.NET中的数据绑定语法的一些内部机理.简单说来就是ASP.NET在运行时为我们完成了页面的动态编译,并解析页面的各种服务器端代 ...
vue自定义组件数据双向绑定，获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
【笔记】vue父子组件数据双向绑定（v-model、prop.aync）
文章目录一.v-model 1.最简写法 2.可自定义属性名的写法(2.2.0+) 3.多绑二..sync [自定义组件的 v-model - Vue.js 中文文档]:(https://vuej ...

vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？

vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？相关推荐

最新文章

热门文章