3

Olá, sou iniciante em Vue estou querendo fazer um menu com submenu vindo de um json, segue os códigos que fiz:

<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>

e o json que fiz:

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

a ideia seria o IFs ser o titulo do menu e os seus filhos serem partes do submenu e ai clicar neles vai para o link de cada um.

Alguém poderia me dar um norte de como fazer? Abraço.

1
  • Podes mostrar como imaginas o html? ou explicar melhor a estrutura de menus que pensaste...
    – Sergio
    Commented 7/03/2019 às 21:11

2 Respostas 2

3

Consegui, Segue como fiz a estrutura no 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>
2

Você vai ter que percorrer o json para exibir segue um exemplo de utilização do v-for na 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;
}
1
  • Sabe como poderia fazer para acessar os filhos do IFs? Iria fazer um for neles para fazer o dropdown Commented 8/03/2019 às 17:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .