[Vuejs]-There is a nested "src": "", in json object which i intend to display on my page, how can i select it using Vue

by

1👍

✅

This works well enough

<template>
  <ul>
    <li
      v-for="fish in fishObject['Image Gallery']"
      :key="fish['Fishery Management']"
    >
      <p>{{ fish.title }}</p>
      <img width="200" height="200" :alt="fish.alt" :src="fish.src" />
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      fishObject: {},
    }
  },
  async created() {
    const response = await fetch('https://www.fishwatch.gov/api/species')
    const data = await response.json()
    this.fishObject = data[0] // you can also v-for on that one of course
  },
}
</script>

You can of course iterate on the received data rather than doing data[0] but since the whole initial array is full of 116 elements, I thought it would not be relevant here.

Nesting the current v-for in another v-for would be the solution for that case.

PS: not sure if you need to use Species Illustration Photo or Image Gallery but the idea is overall the same. Thought a gallery might be more useful to loop on.

👤kissu

Leave a comment