vue列表渲染一个数组，交换数组内某两个相邻元素的位置，这两个元素内的audio标签的变现状态却不一样，是什么原理呢？

Question

vue列表渲染一个数组，交换数组内某两个相邻元素的位置，这两个元素内的audio标签的变现状态却不一样，是什么原理呢？

发布于
2019-01-04

更新于
2019-01-04

新手上路，请多包涵

1.有一个数组，假设每个元素里都有一个音频，都在播放，用 this.tempArr.splice(newIndex,0,...this.tempArr.splice(oldIndex,1))
该方法交换数组内某两个元素位置，在windows，谷歌环境下，向前换位置的元素音频仍然继续播放，向后换位置的音频播放会被暂停，请问这是为啥呀，这个dome 用vue实现代码如下
链接描述

困扰小弟很久了，同样是谷歌，Windows，安卓就会有该问题，苹果就不会，是机制不一样么，求大神指教原理！！

问题出现的环境背景及自己尝试过的方法

只会在windows，和安卓环境下出现该问题，key值也给了不同的值，换位代码使用过$set,和解构赋值然后$forceUpdate方法，都是这样的现象

相关代码

链接描述以下为demo代码，也可移步至链接直观操作

<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 #eee;
  padding: 10px;
}
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  margin-bottom: 20px;
  border: 1px solid #aaa;
}
</style>