Vue Submenu menu from json

Question

Hello, I’m beginner in Vue I’m wanting to make a menu with submenu coming from a json, follow the codes I made:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">


    {{ response.data.IFs }}

  </div>
</template>

<script>
    export default {
        name: 'app',
        data: function() {
            return {
                response: null
            }
        },
        created() {
            this.$http.get("/db").then(response => (this.response = response))
        }
    }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

and the json I made:

{
  "IFs": [
    {
      "name": "IFSC",
      "url": "HGJJHHGJHG"
    },
    {
      "name": "IFRS",
      "url": "DSASADDSA"
    }
  ],
  "Cidades": [
    {
      "name": "paulo",
      "url": "dfkjslkfds"
    },
    {
      "name": "Lopes",
      "url": "dsfdsfds"
    }
  ]
}

the idea would be for Ifs to be the title of the menu and your children to be part of the submenu and then click on them goes to the link of each one.

Could someone give me a north how to do? Hug.

Answer 1

You will have to go through the json to display an example of using the v-for on the tag <a>:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <a v-for="item in response.data.IFs" :href="item.url">{{item.name}}</a>

  </div>
</template>

<script>
    export default {
        name: 'app',
        data: function() {
            return {
                response: null
            }
        },
        created() {
            this.$http.get("/db").then(response => (this.response = response))
        }
    }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

Answer 2

I did it, I did it, Follow how I did the structure in v-for:

<ul>
  <li v-if = "info != null" v-for="(item, key, index) in info.data">
    <p>-- {{key}} --</p>
    <span v-if = "info != null" v-for="(item, key, index) in item">
      <a :href="item.url"><p>{{ item.name }}</p></a>
    </span> 
  </li>
</ul>