曲の再生総時間をページが表示されたタイミングで表示したい

Question

実現したいこと

曲の再生総時間をページが表示されたタイミングで表示したいです。
audioElementで曲の再生時間を取得し、曲名の横に再生時間を表示しようとしています。
・created部分に、onloadedmeradataの中にgenerateDurationを記述し、データを読み込ませた後にdurationを取得
・v-forで曲のlistを表示し、{{ item.du }}で再生総時間を表示（ここができない）
・chromeにあるvue拡張機能でデータが取れているか確認したところ、取れてはいる
・同じ列の{{ item.name }}(曲名)はホバーされなくてもページが読まれたときに表示される

該当コード

<template>
 <div>
　<img :src="this.jacket" class="music__jacket" alt />
  <ul>
   <li
    v-for="(item, index) in filteredIndex"
    :key="(item.name, item.du, index)"
    class="music__item"
    :class="{ active: isActive[index] }"
    @click="Play(index)"
    @mouseenter="showBgImage(index)"
   >   
    <div class="songname">
     {{ item.name }}
    </div>
    <div>
     {{ item.du }}
    </div>
   </li>
  </ul>
 </div>
</temlate>
<script>
export default {
  props: {
    tracks: {
      type: Array,
      default: () => []
    }
  },
data() {
    return {
      initialIndex: 0,
      audio: null,
      width: {},
      barWidth: {},
      currentSecTime: {},
      currentTime: {},
      selectedItem: '',
      isActive: [false, false, false, false, false],
      duration: 0,
      bgimg: {},
      jacket:
        'test.jpg',
      filteredIndex: []
    }
  },
created() {
    if (process.client) {
      this.audio = new Audio()
      this.audio.onloadedmetadata = () => {
        this.generateTime()
      }

      this.filteredIndex = this.tracks.filter((value) => {
        return value.name !== null
      })

      for (let index = 0; index < this.filteredIndex.length; index++) {
        this.audio[index] = new Audio()
        this.audio[index].preload = 'metadata'
        this.audio[index].onloadedmetadata = () => {
          this.generateDuration(index)
          this.audio[index] = null
        }
        this.audio[index].src = this.filteredIndex[index].source
      }
    }
  },
    generateDuration(i) {
      let durmin = Math.floor(this.audio[i].duration / 60)
      let dursec = Math.floor(this.audio[i].duration - durmin * 60)
      if (durmin < 10) {
        durmin = '0' + durmin
      }
      if (dursec < 10) {
        dursec = '0' + dursec
      }
      this.filteredIndex[i].du = durmin + ':' + dursec
      // return this.filteredIndex[i].du
      console.log(this.filteredIndex[i].du)
    },
　　showBgImage(index) {
      this.jacket = this.tracks[index].jacket
    }
　}
}
</script>

#環境

• npm 6.13.4
• node 12.16.1
• Nuxt.js
• chorome
• Mac
• Wordpressと連携

Answer 1

この部分を

<script>
this.filteredIndex[i].du = durmin + ':' + dursec
</script>

以下のように書き換えることで解決

<script>
this.$set(this.filteredIndex[i], 'du', durmin + ':' + dursec)
</script>

オブジェクトの中身を変更する際、Vueの書き方にしないといけないらしい
参考Qiita