Vue切换函数仅生效一次，点击切换图标报TypeError错误求助

问题分析与修复方案 #

让我帮你排查一下这个功能异常和报错的问题，其实是几个细节没处理到位：

1. 模板与方法名不匹配导致报错

你模板里的播放暂停按钮绑定的点击事件是playPause()，但在methods里定义的对应方法是playPause1，这种不匹配会导致Vue找不到对应方法，进而抛出TypeError: Cannot read property '_wrapper' of undefined的错误。

修复：
把模板里的方法名改成和methods一致：

<div @click="playPause1()" v-bind:class="[isPaused ? 'icon-pause' : 'icon-play']"></div>

2. playPause1方法逻辑错误，导致状态无法正常切换

你当前的playPause1方法里，两次连续的if判断会直接抵消状态变化：第一次把isPaused设为false，紧接着第二次判断又把它改回true，相当于点击后状态根本没变化，自然功能只“生效”一次。而且方法里也没有控制音频的播放/暂停操作。

修复：
重构方法逻辑，直接切换状态并同步控制音频：

playPause1: function(event){
  console.log("clicked");
  this.isPaused = !this.isPaused; // 直接切换状态
  console.log(this.isPaused);
  // 根据状态控制音频播放/暂停
  if(this.isPaused){
    this.audio_player_1.pause();
  } else {
    this.audio_player_1.play();
  }
},

另外不需要直接操作this.$data.isPaused，直接用this.isPaused就能触发Vue的响应式更新。

3. 音频自动播放时未同步状态

在Audio1change方法中，选择音频文件后会自动调用play()，但此时isPaused还是初始的true，会导致图标显示和实际播放状态不一致。

修复：
在音频自动播放后同步更新状态：

Audio1change(event) {
  var fileReader = new FileReader;
  fileReader.onload = function(){
    var arrayBuffer = this.result;
    console.log(arrayBuffer);
  }
  fileReader.readAsArrayBuffer(event.target.files[0]);
  var url = URL.createObjectURL(event.target.files[0]);
  this.audio_player_1.src = url;
  this.audio_player_1.play();
  this.isPaused = false; // 同步状态为播放中
},

把以上三点修改完成后，你的播放暂停切换功能就能正常工作，图标类会正确切换，也不会再出现报错。

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