具有 HTML5 音频属性的 vuejs

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 }} 时，我得到了

计算表达式“currentTime”时出错。

未捕获的类型错误：无法读取 null 的属性“currentTime”

原文由 zl2003cn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 vue 2.0，引用元素的方式发生了变化。

在 HTML 中

<audio ref="audio" controls>

在 Vuejs 中

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

原文由 Sanyam Jain 发布，翻译遵循 CC BY-SA 3.0 许可协议