0

Full code: https://github.com/kenpeter/test_vue_simple_audio_2

In Main.vue

I tried to assign new value to this.player.currentTrack, by following this guide.

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();
},

It seems no error, until I click the button

Error

Error: Cannot read property 'duration' of undefined

In 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>

From the image, you can see that there is a value: 274, which is the value of currentTrack.duration initially. After I click the button, currentTrack becomes undefined. currentTrack is a computed value.

2 Answers 2

0

You used currentTrack.duration instead of player.currentTrack.duration, try this:

<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>
1
  • Hi, For currentTrack there are actually 2 of them (with the same name). One is player.currentTrack and the other one is computed: { currentTrack: function ().... }. I need the one in computed. How do I use computed in template?
    – kenpeter
    Mar 2, 2017 at 2:49
0

this is the correct way to do object.assign. My method above is wrong.

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

console.log(player);

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

console.log(player);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.