v-for下的v-if，怎么单独控制元素的显示隐藏

Question

 <div class="Music-row">
            <a
              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()">
                  <img src="../assets/images/pause.png" v-if="played" class="pause" alt=""/>
                  <img src="../assets/images/play.png" v-else class="play" alt=""/>
                </div>
              </div>
              <div class="Music-type">格式 : {{ item.type }}</div>
            </a>
          </div>

data() {
    return {
     played:true,
     MusicList: [
        {
          name: "庄重年会企业宣传",
          time: "03:23",
          type: "mp3",
        },
        {
          name: "庄重年会企业宣传",
          time: "03:23",
          type: "mp3",
        }
      ],
  },

 methods: {
    //点击播放按钮
    onPlay() {
      if (this.played) {
        this.played = false;
      } else {
        this.played = true;
      }
    },
  },

我的写法会导致，全部容器的按钮一切被切换

请问该如何单独使用点击事件控制每个容器中的图片按钮进行切换

Answer 1

你把played这个属性写到每个MusicList数组对象中, 每次切换就改变MusicList数组中指定的played的布尔值

<div class="playbtn" @click="onPlay(item)">
    <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>

MusicList: [
    {
      name: "庄重年会企业宣传",
      time: "03:23",
      type: "mp3",
      played: true,
    },
    {
      name: "庄重年会企业宣传",
      time: "03:23",
      type: "mp3",
      played: true,
    }
  ]

onPlay(item) {
  item.played = !item.played
},

Answer 2

试试

<.... @click="onPlay(item)">

onPlay(it) {
    it.played = !it.played;
}

这是 Vue3 的在线示例，Vue2 也差不多。

注意 v-if 那里写错了，应该是 v-if="item.played"。

Answer 3

我没测，大概这个逻辑

 methods: {
    //点击播放按钮
    onPlay(item) {
        this.$set(item, 'played', !item['played'] ? true : false);
    },
  },

Answer 4

建议在musicList的每个对象上加上play属性（在created的时候添加），然后点击时获取元素的index，把该元素的play 改成false就行