vuejs与HTML5音频性能

Question

我使用Vuejs为音频控制面板，我想获得currentTime属性绑定到computed价值，所以我写

computed: { 
    'currentTime': { 
     cache: false, 
     get: function() { 
     return document.getElementById('player').currentTime 
     } 
    } 
    }, 

这里是我audio标签：

<audio :src="musicSrc" preload="auto" id="player"> 
    <p>Your browser does not support the <code>audio</code> element.</p> 
    </audio> 

我可以ready得到它：

ready() { 
    this.player = document.getElementById('player') 
    }, 

我可以控制它methods

play: function() { 
    this.player.play() 
}, 

但是当我在模板中使用{{ currentTime }}我

Error when evaluating expression "currentTime".

Uncaught TypeError: Cannot read property 'currentTime' of null

Answer 1

你应该通过V-EL注册引用它

<audio v-el:audio :src="musicSrc" preload="auto"></audio>

然后通过$ els属性在你的vue实例中访问它，像这样

ready: function() { 
    this.$els.audio.play(); 
} 

Answer 2

这似乎是一个特别 “VUE” 方式来处理，这是像这样：

HTML：

<audio @timeupdate='onTimeUpdateListener'></audio> 

JS：

export default { 
    data() { 
    return { 
     currentTime: '00:00' // The initial current time 
    } 
    }, 
    methods: { 
    onTimeUpdateListener: function() { 
     // Update current time 
     this.currentTime = this.$els.audio.currentTime 
    } 
    } 
} 

信用这种方法转到本作者为SO answer。

Answer 3

对于vue 2.0，引用元素的方式已更改。

在HTML
<audio ref="audio" controls>

在Vuejs
this.currentTime = this.$refs.audio.currentTime