[Vuejs]-Retrieving images from data return in vuejs

0๐Ÿ‘

โœ…

you can also ease up your template logic and have only one if condition if there is a 1:1 relation between ships and their images with the following computed property:

computed: {
    shipsWithImages() {
    return this.destroyedShipBoximages.filter((value) => {
    if(this.destroyedShipBox.includes(value.type)) {
        return value;
    }
  })
},

}

Cheers,

ewatch

0๐Ÿ‘

You should assign links.src to src attribute of img tag like this:

<div>
  <tr v-for='(ships,index) in destroyedShipBox' :key='index'>
    <td>{{ships}}</td>
    <td>
      <div v-for='(links,index1) in destroyedShipBoximages' :key='index1'>
        <img :src="links.src" v-if="links.type==ships"/>
      </div>
    </td>
  </tr>
</div>

Leave a comment