Trying to showcase images in my code that are already stored in my data like this:
<div >
<tr v-for='(ships,index) in destroyedShipBox' :key='index'>
<td>{{ships}}</td>
<div v-for='(links,index1) in destroyedShipBoximages' :key='index1'>
{{links.type==ships?links.src:''}}
</div>
</tr>
</div>
Where my data holds arrays of objects:
data() {
return {
destroyedShipBox:['PatrolBoat','Destroyer'],
destroyedShipBoximages:[
{type:'PatrolBoat',src:require('../assets/patrolBoatHorizontalView.png')},
{type:'Submarine',src:require('../assets/submarineHorizontalView.png')},
{type:'BattleShip',src:require('../assets/battleshipHorizontalView.png')},
{type:'Carrier',src:require('../assets/carrierHorizontalView.png')},
{type:'Destroyer',src:require('../assets/destroyerHorizontalView.png')},
],
}
The destroyedShipBox is filled automatically with JSON data, while the destroyedShipBoximages represents each type of ship in the game along with its respective image. The issue arises when trying to display an image based on the ships listed in the destroyedShipBox array, resulting in:
PatrolBoat /img/patrolBoatHorizontalView.63b25d8d.png----->should be an image instead
Destroyer /img/destroyerHorizontalView.396ed25f.png ----->should be an image instead
Simply put, the images do not appear as expected. Any suggestions on how to resolve this issue? Thank you in advance!!!!