javascript - How does Vue traverse data from two JSONs and assign values to the DOM based on the same Key?

Question

Existing data 1 shipTypes {code...} and data 2 shipTypeImages {code...} Vue DOM structure (pug syntax) {code...} How can I achieve the Key value of the two data (such as "Destroyer") To match the data, do the following example? Destroyer Aircraft Carrier Battleship Cruiser...

伊谢尔伦 · Answer

Two arrays foreach loop to form a new array to render to the page

Or use computed properties

巴扎黑 · Answer

let ships = Object.keys(shipTypes).map((type) => {
    return {
        type,
        name: shipTypes[type],
        image: shipTypeImages[type].image
    }
})
console.log(ships);

...