Vue合并数组

在Vue中，我们经常需要处理数组，并且有时候需要合并多个数组。本文将介绍如何使用Vue来合并数组。

方法一：使用concat()方法

Vue中的数组是响应式的，我们可以使用concat()方法来合并多个数组，同时保持数组的响应式。

示例代码

<template>
  <div>
    <ul>
      <li v-for="item in mergedArray" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: [
        { id: 1, name: "Tom" },
        { id: 2, name: "Jerry" },
      ],
      array2: [
        { id: 3, name: "Alice" },
        { id: 4, name: "Bob" },
      ],
    }
  },
  computed: {
    mergedArray() {
      return this.array1.concat(this.array2)
    },
  },
}
</script>

运行结果

Tom
Jerry
Alice
Bob

方法二：使用扩展运算符

除了使用concat()方法，还可以使用扩展运算符（…）来合并数组。

示例代码

<template>
  <div>
    <ul>
      <li v-for="item in mergedArray" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: [
        { id: 1, name: "Tom" },
        { id: 2, name: "Jerry" },
      ],
      array2: [
        { id: 3, name: "Alice" },
        { id: 4, name: "Bob" },
      ],
    }
  },
  computed: {
    mergedArray() {
      return [...this.array1, ...this.array2]
    },
  },
}
</script>

运行结果

Tom
Jerry
Alice
Bob

方法三：使用push()方法

除了直接合并数组，我们还可以使用push()方法来将数组元素添加到另一个数组中。

示例代码

<template>
  <div>
    <ul>
      <li v-for="item in mergedArray" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: [
        { id: 1, name: "Tom" },
        { id: 2, name: "Jerry" },
      ],
      array2: [
        { id: 3, name: "Alice" },
        { id: 4, name: "Bob" },
      ],
    }
  },
  computed: {
    mergedArray() {
      let merged = []
      merged.push(...this.array1)
      merged.push(...this.array2)
      return merged
    },
  },
}
</script>

运行结果

Tom
Jerry
Alice
Bob

方法四：使用Vue.set()方法

在Vue中，如果我们想要合并数组并保持响应式，我们可以使用Vue.set()方法。

示例代码

<template>
  <div>
    <ul>
      <li v-for="item in mergedArray" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array1: [
        { id: 1, name: "Tom" },
        { id: 2, name: "Jerry" },
      ],
      array2: [
        { id: 3, name: "Alice" },
        { id: 4, name: "Bob" },
      ],
      mergedArray: [],
    }
  },
  mounted() {
    this.mergeArrays()
  },
  methods: {
    mergeArrays() {
      this.mergedArray = this.array1.slice()
      this.array2.forEach((item) => {
        Vue.set(this.mergedArray, this.mergedArray.length, item)
      })
    },
  },
}
</script>