如何在 Vue2

如何解决如何在 Vue2

我需要一个代码建议，因为没有找到解决方案......可能有两部分问题：

在 Created() 上，我有 2 个要组合的数组（其中一个数组是外部 Axios API）

'''

<template>
      <div v-for="merged in mergedArray.slice(0,5)">

          Title: {{merged.title}}
          <!-- this is initaiall from arrayAxios  -->

          Color: {{merged.color}}
          <!-- this is initaiall from arrayVue  -->

      </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            arrayAxios: null,arrayVue: [
                {id:1,name: "Paris",color: "blue"},{id:1,name: "Milano",color: "green"},name: "London",color: "gray"}
            ],mergedArray:null 
        }
    },created(){
        axios.get('https://jsonplaceholder.typicode.com/albums/')
            .then((response) => {
                this.arrayAxios = response.data;
        });    
    },}
</script>

'''

第一部分（选项）：ID 匹配，等长数组。 在创建（或挂载）时，想法是将数据从 Axios 获取的数组（示例中的 arrayAxios）推送到已经存在的数组（示例中的 arrayVue）中，并显示组合的新结果。合并是通过匹配确切的 Id 来完成的，因此只需将 aaray 中元素的现有属性连接到一个新数组 (mergedArray) 中。

第二部分（对我来说不太重要，但对其他人来说可能很有趣）：Id 不完全匹配，因为数组不相等 数组的长度不同（与哪个无关），因此只有部分 Id 匹配，因此一旦较短的数组耗尽（完全连接）并分配新属性，它必须是一个循环以返回到初始元素。 例如，Axios 请求（更长的数组）只会对 3 个 arrayVue 元素获得 100 响应，因此前三个 Axios 结果将分别分配给 arrayVue 的 Id 1、2、3，并推送到 mergeArray。但是，接下来的 3 个 Axios 将继续循环，结果将再次面对仅有的三个初始 arrayVue 元素。

解决方法

对于第一种情况，您可以使用 filter() 来检查两个数组中的 id 是否匹配。

this.arrayAxios.filter(arr => this.arrayVue.filter(a => a['id'] === arr['id']))

这将从 arrayAxios 返回那些与 arrayVue 的 id 匹配的对象。