vue 双重遍历且数组元素交换

在Vue中，如果你需要双重遍历两个数组并对其中的元素进行交换，你可以这样做：

首先，假设你有两个数组 `array1` 和 `array2`，并且你想根据某些条件在两个数组之间进行元素交换。这里是一个简单的示例，我们只交换相等的元素位置：

<template>
  <div v-for="(item1, index1) in array1" :key="index1">
    <span v-if="findMatchingItem(array2, item1)">
      <!-- 找到匹配项，交换位置 -->
      {{ array2[index2] }} (原: {{ item2}})
      <button @click="swap(index1, index2)">交换</button>
    </span>
    <span v-else>{{ item1 }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: ..., // 你的第一个数组
      array2: ..., // 你的第二个数组
    };
  },
  methods: {
    findMatchingItem(arr, item) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === item) {
          return i;
        }
      }
      return -1; // 如果找不到匹配，返回-1
    },
    swap(index1, index2) {
      const temp = this.array1[index1];
      this.array1[index1] = this.array2[index2];
      this.array2[index2] = temp;
    },
  },
};
</script>

在这个例子中，`findMatchingItem` 函数用于查找在 `array2` 中与 `item1` 匹配的元素的索引。找到后，通过 `swap` 方法交换两个数组中对应位置的元素。注意，在实际应用中，你可能需要根据业务需求调整这个方法，比如添加过滤条件、错误处理等。