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!

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