I have a Vue.js data array that contains information about counties in the UK. I want to create links between related county pages based on the data in the array.
To achieve this, I need to loop through the main county object and compare the items in the closeby field with the county names.
Example of my current data structure:
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')
I have displayed the related counties like this:
<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>
Now, I want to include the links of each county alongside their names, like:
Cambridgeshire (example.com/link1), Hertfordshire (example.com/link2), Buckinghamshire (example.com/link3), and Northamptonshire (example.com/link4)
How can I compare the items in the closeby field with the links for each county in the counties array so that I can display them correctly, considering the varying number of items in closeby?