具有HTML5音频属性的vuejs [英] vuejs with HTML5 audio property

问题描述

我正在使用Vuejs为音频制作控制面板，我想将 currentTime 属性绑定到计算值，所以我写

I'm using Vuejs to make a control panel for audio, I want to get the currentTime property bind to a computed value, so I write

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

这是我的音频标签：

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

我可以在准备就绪：

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

我可以用方法控制它

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

但是当我在模板中使用 {{currentTime}} 时，我得到了

But when I use {{ currentTime }} in template I got

评估表达式currentTime时出错。

Error when evaluating expression "currentTime".

未捕获的TypeError：无法读取null的属性'currentTime'

Uncaught TypeError: Cannot read property 'currentTime' of null

推荐答案

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

For vue 2.0 the way to reference an element has changed.

在HTML中


< audio ref =audiocontrols>

在Vuejs

this.currentTime = this。$ refs.audio.currentTime

这篇关于具有HTML5音频属性的vuejs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！