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.