vue中如何操作在v-for下的点击事件绑定的元素与其相邻的元素样式

Question

<div class="Music-row">
            <div
              href="javascript:void(0);"
              class="Music-Item"
              v-for="(item, ind) in MusicList"
              :key="ind"
            >
              <div class="Music-title">
                <div>
                  {{ item.name }}
                </div>
              </div>
              <div class="Music-main">
                <div class="playbtn" @click="onPlay(ind)">
                  <img
                    src="../assets/images/pause.png"
                    v-if="item.played"
                    class="pause"
                    alt=""
                  />
                  <img
                    src="../assets/images/play.png"
                    v-else
                    class="play"
                    alt=""
                  />
                </div>
                <div class="startime">00:00</div>
                <div class="progress" ref="progress">
                  <span class="progress-play"></span>
                </div>
                <div class="endtime">{{ item.time }}</div>
              </div>
              <div class="Music-type">格式 : {{ item.type }}</div>
            </div>
          </div>

我想要在点击事件触发的时候操作旁边的元素（如下图）

js的写法可以做到（代码如下）

 methods: {
    //点击播放按钮
    onPlay(ind) {
      this.MusicList.forEach(function (data, index) {
        if (ind == index) {
          data.played = !data.played;
          document.getElementsByClassName('progress-play')[ind].style.width="100%";
        }else{
          data.played=true;
        }
      });
    },
  },

请问用vue的写法该如何做到这样的效果，请注意，父元素有v-for标签

Answer 1

写一个公共变量来存放当前点击元素的下标，比如activeIndex

//dom
<span class="progress-play" :style="{width: activeIndex === ind ? '100%' : '0'}"></span>

// js
onPlay(ind) {
    this.activeIndex = ind
}

Answer 2

动态修改class

<div class="progress" ref="progress">
    <span class="progress-play" :class="{unfolding: !item.played}"></span>
</div>

<style>
    .unfolding {
        width: 100%;
    }
</style>