单击按钮后，计算变量未定义

Question

完整代码：https://github.com/kenpeter/test_vue_simple_audio_2

在Main.vue

我尝试通过关注此guide为<{1}}分配新值。

this.player.currentTrack

似乎没有错误，直到我点击按钮

selectTrack: function selectTrack(id) {
  this.player.currentTrack = Object.assign(
    {},
    this.player.currentTrack,
    { currentTrack: id },
  );
  this.player.elapsed = Object.assign(
    {},
    this.player.elapsed,
    { elapsed: 0 },
  );
  // this.play();
},

在Main.vue中，Error: Cannot read property 'duration' of undefined

currentTrack.duration

从图片中，您可以看到有一个值<div class="player__timer"> <div class="player__timer__elapsed" v-text="player.elapsed"></div> <div class="player__timer__total" v-text="currentTrack.duration"></div> </div> <div class="slider player__progress-bar"> <input type="range" :value="player.elapsed" :max="currentTrack.duration" /> </div> ，这是274 最初的值。单击按钮后，currentTrack.duration变为未定义。 currentTrack是currentTrack值。

Answer 1

您使用currentTrack.duration代替player.currentTrack.duration，请尝试以下操作：

<div class="player__timer">
  <div class="player__timer__elapsed" v-text="player.elapsed"></div>

  <div class="player__timer__total" v-text="player.currentTrack.duration"></div>
</div>

<div class="slider player__progress-bar">  
  <input type="range" :value="player.elapsed" :max="player.currentTrack.duration" />
</div>

Answer 2

这是做object.assign的正确方法。我上面的方法是错误的。

let player = {
  currentTrack: 0,
  other: ""
};

console.log(player);

player = Object.assign(
  {},
  player,
  { currentTrack: 2}
);

console.log(player);