Trying to display a nested object in a json api using vue, i'm pretty close just missing half a-CodePudding

So i'm declaring the variable and targetting the name of the object I want to render but because it's nested it won't show up on the DOM, need a little shove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <div >
        <h1> {{ fishName }} </h1> 



    </div>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
fetch('https://www.fishwatch.gov/api/species')
    .then(res => res.json())
    .then(data => console.log(data))
let app = Vue.createApp ({ 
    data: function() {
        return {
        fishName: ["Species Name"],
    }
}
})
app.mount('.app')
</script>
</body>
</html>

Tried a couple of things but this is where im at.

CodePudding user response：

Try like following snippet:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>    
<div >
  <ul v-for="(fish, i) in fishes" :key="i">
    <li> {{ fish[fishName] }} </li> 
  </ul>
</div>
<script>
let app = Vue.createApp ({ 
  data() {
    return {
      fishes: [],
      fishName: ["Species Name"],
    }
  },
  mounted() {
    fetch('https://www.fishwatch.gov/api/species')
      .then(res => res.json())
      .then(data => {
        this.fishes = data
      })
  }
})
app.mount('.app')
</script>