Vue实现数组对象匹配，展示关联郡的对应链接

我在Vue.js中创建了一个用于构建英国郡列表详情的数据数组，最后一步希望基于数组中的数据为相关郡页面创建关联链接。我需要遍历主郡对象，将closeby中的项与郡名进行匹配。

当前我的数据结构如下：

createApp({
    data() {
        return {
            counties: [
                {
                    county: 'Bedfordshire',
                    link: 'example.com/link',
                    districts: [
                        { authority: "Bedford" },
                        { authority: "Luton" }
                    ],
                    cities: false,
                    coastal: false,
                    flag: true,
                    closeby: [
                        { county: 'Cambridgeshire' },
                        { county: 'Hertfordshire' },
                        { county: 'Buckinghamshire' },
                        { county: "Northamptonshire" }
                    ]
                },
                ...
            ],
        }
    }
}).mount('#app')

该数组包含所有英国郡的数据，此处为便于阅读进行了精简。

目前我用于展示closeby部分的代码如下：

<span v-for="(neighbour, index) in county.closeby">
    <span v-if="index !== 0 && index !== county.closeby.length - 1">, </span>
    <span v-if="index == county.closeby.length - 1 && county.closeby.length > 1"> and </span>
    {{ neighbour.county }}
</span>

这段代码的输出为：Cambridgeshire, Hertfordshire, Buckinghamshire and Northamptonshire

我希望实现的效果是在每个郡名旁显示对应郡的链接，例如：
Cambridgeshire (example.com/link1), Hertfordshire (example.com/link2), Buckinghamshire (example.com/link3) and Northamptonshire (example.com/link4)

请问如何将closeby中的项与counties数组中对应郡的link进行匹配并展示？需注意closeby的项数是不固定的。

方法一：用计算属性预处理邻郡数据 #

推荐通过计算属性提前匹配好邻郡和对应链接，模板逻辑更简洁，且性能更优：

1. 在组件中添加计算属性：

computed: {
    matchedCloseby() {
        return this.county.closeby.map(neighbour => {
            // 从总郡列表中匹配同名郡的链接
            const target = this.counties.find(item => item.county === neighbour.county);
            return {
                name: neighbour.county,
                link: target ? target.link : '#' // 匹配不到时设默认链接
            };
        });
    }
}

注：this.county指当前正在展示的单个郡对象，需确保处于父级v-for="county in counties"的上下文内

2. 修改模板代码：

<span v-for="(neighbour, index) in matchedCloseby" :key="index">
    <!-- 处理分隔符逻辑 -->
    <span v-if="index > 0">
        <span v-if="index !== matchedCloseby.length - 1">, </span>
        <span v-else> and </span>
    </span>
    <!-- 展示郡名与对应链接 -->
    {{ neighbour.name }} ({{ neighbour.link }})
</span>

方法二：模板内直接匹配（适合简单场景） #

如果不想新增计算属性，也可以在模板中直接调用find方法匹配，但数据量大时会有性能损耗：

<span v-for="(neighbour, index) in county.closeby" :key="index">
    <span v-if="index > 0">
        <span v-if="index !== county.closeby.length - 1">, </span>
        <span v-else> and </span>
    </span>
    {{ neighbour.county }} 
    ({{ counties.find(c => c.county === neighbour.county)?.link || '#' }})
</span>

这里用可选链?.避免匹配不到时抛出错误，同时设置默认值#。

性能优化建议 #

如果counties数组数据量较大，建议提前将其转为键值对映射，把查找复杂度从O(n)降到O(1)：
在created钩子中处理：

created() {
    this.countyLinkMap = this.counties.reduce((map, item) => {
        map[item.county] = item.link;
        return map;
    }, {});
}

之后在计算属性或模板中，直接通过this.countyLinkMap[neighbour.county]获取链接即可。

内容的提问来源于stack exchange，提问作者UntitledGraphic