計算さ変数が

Question

完全なコードボタンをクリックした後、定義されていません：Main.vue

でhttps://github.com/kenpeter/test_vue_simple_audio_2

を私はこの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(); 
}, 

私がイメージから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> 

、ボタンをMain.vueで

Error: Cannot read property 'duration' of undefined 

をクリックするまで、あなたがそれを見ることができ、エラー思いません値は274で、これはの値ですは、最初にである。ボタンをクリックすると、currentTrackは未定義になります。 currentTrackはcomputedの値です。

Answer 1

あなたはこの試みる、currentTrack.duration代わりのplayer.currentTrack.durationを使用：これはobject.assign行うための正しい方法である

<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

を。私の上記の方法は間違っています。

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

console.log(player); 

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

console.log(player);