The vue list renders an array and exchanges the positions of two adjacent elements in the array, but the audio tags in the two elements have different realization states. What is the principle?

1. There is an array, assuming that there is an audio in each element that is playing. Use this.tempArr.splice (newIndex,0,...this.tempArr.splice (oldIndex,1))
this method to exchange the positions of some two elements in the array. In windows, Google environment, the element audio that changes forward continues to play, and the audio that changes backward will be paused. May I ask why? The dome is implemented in vue as follows:
link description

has been bothering me for a long time. Google, Windows and Android will have this problem. Apple will not. Is the mechanism different? ask God for advice on the principle!

clipboard.png

clipboard.png

the environmental background of the problem and the methods I have tried

this problem only occurs in windows and Android environments, and the key value is also given a different value. The transposition code uses $set, destructs and assigns values, and then the $forceUpdate method, all of which

related codes

Link description the following is the demo code, or you can go to the link intuitive action

<template>
  <div class="hello">
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        <span @click.stop="handleSort(-1, index);"> </span> {{ item.name }}
        <audio
          src="http://wechatapppro-1252524126.file.myqcloud.com/undefined/audio/51f7e622a2bc882aad68ed5e070c44de.mp3"
          :id="item.id"
        />
        <span @click.stop="playAudio(item);">{{ item.status }}</span>
        <span @click.stop="handleSort(1, index);"></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      items: [
        { name: "A", id: "A1", status: "" },
        { name: "B", id: "B2", status: "" },
        { name: "C", id: "C3", status: "" },
        { name: "D", id: "D4", status: "" }
      ]
    };
  },
  methods: {
    playAudio(obj) {
      let audioItem = document.getElementById(obj.id);
      if (audioItem.paused) {
        audioItem.play();
        obj.status = "";
      } else {
        obj.status = "";
        audioItem.pause();
      }
    },

    handleSort(type, index) {
      if (
        (index === 0 && type < 0) ||
        (index === this.items.length - 1 && type > 0)
      ) {
        return;
      }
      this.items.splice(index + type, 0, ...this.items.splice(index, 1));
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul,
li {
  list-style: none;
}
span {
  display: inline-block;
  cursor: pointer;
  border: 1px solid -sharpeee;
  padding: 10px;
}
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  margin-bottom: 20px;
  border: 1px solid -sharpaaa;
}
</style>

expected results

there is no error message. The expected result is that the audio can be played without pausing regardless of whether the audio is moved up or down. Due to the coupling between the project components, each item in the actual development will have an audio tag, which cannot be moved outside the list rendering

.
Mar.31,2022

chrome 71.0 Test No. You said that moving up and down after playback will be paused

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36475-2bff2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36475-2bff2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?