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

Question

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

在 Main.vue 中

我尝试通过关注此guide 为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();
},

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

Error: Cannot read property 'duration' of undefined

在 Main.vue 中，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 是 computed 值。

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);