Vue点击video触发事件报错this.play is not a function如何解决

你遇到的报错Uncaught TypeError: this.play is not a function翻译为：未捕获类型错误：this.play 不是一个函数。
报错核心原因是Vue模板事件绑定中写的this并不指向当前点击的<video>DOM元素，而是指向当前Vue组件实例，组件实例上没有原生video的play()方法，自然调用失败。

不需要手动在事件里传this，有两种常用实现方式：

方式1：通过事件对象获取触发元素 #

直接绑定方法名不传参，方法中接收事件对象，通过event.target拿到点击的video元素：
修改后的模板代码：

<video
  v-for="option in visualizerOptions"
  v-bind:key="option.id"
  src="@/assets/testvideo.mp4"
  spinner-color="black"
  class="carousel__item"
  v-on:click="playVid"
/>

对应的JavaScript代码：

playVid(event) {
  // event.target为当前点击的原生video DOM元素
  event.target.play()
}

方式2：需要同时传循环参数时用$event占位 #

如果点击逻辑需要用到v-for循环的option参数，可以用Vue内置的$event特殊变量传递事件对象：
模板代码：

<video
  v-for="option in visualizerOptions"
  v-bind:key="option.id"
  src="@/assets/testvideo.mp4"
  spinner-color="black"
  class="carousel__item"
  v-on:click="playVid($event, option)"
/>

对应的JavaScript代码：

playVid(event, option) {
  const videoEl = event.target
  videoEl.play()
  // 此处可直接调用option的属性做额外业务逻辑
}

注意：不要试图在Vue模板的行内事件里传this获取DOM，模板上下文的this始终绑定组件实例，和原生JS的事件行内绑定逻辑不一样。

内容的提问来源于stack exchange，提问作者Michael Miller