javascript - Comment Vue traverse-t-il les données de deux JSON et attribue-t-il des valeurs au DOM en fonction de la même clé?

Question

Données existantes 1 shipTypes

{
    "Destroyer": "驅逐艦",
    "AirCarrier": "航空母艦",
    "Battleship": "主力艦",
    "Cruiser": "巡洋艦"
}

et données 2 shipTypeImages

{
    "Destroyer": {
        "image": "http://glossary-asia-static.gcdn.co/icons/wows/current/vehicle/types/Destroyer/normal.png",
    },
    "AirCarrier": {
        "image": "http://glossary-asia-static.gcdn.co/icons/wows/current/vehicle/types/AirCarrier/normal.png",
    },
    "Battleship": {
        "image": "http://glossary-asia-static.gcdn.co/icons/wows/current/vehicle/types/Battleship/normal.png",
    },
    "Cruiser": {
        "image": "http://glossary-asia-static.gcdn.co/icons/wows/current/vehicle/types/Cruiser/normal.png",
    }
}

Structure Vue DOM (syntaxe carlin)

ul
    li
        img {{shipTypeImages.image}}
        span {{shipTypes.value}}

Comment puis-je faire correspondre les valeurs clés de deux données (telles que « Destroyer ») avec les données, comme le montre l'exemple suivant ?

• Destructeur

• porte-avions

• cuirassé

• Croiseur

Merci !

Answer 1

Deux tableaux foreach boucle pour former un nouveau tableau à restituer sur la page

Ou utilisez les propriétés calculées

Answer 2

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

...