Open maximomarcos opened 4 years ago
could someone help please
Would You please send the error message and format the code in a way that somebody can read it. The Onliner above I cannot read. The is a bug in connection with Vuex.#173 Do you have read it ?
Sorry, follow the code again
<template>
<aside class="menu" v-show="isMenuVisible">
<div class="menu-filter">
<i class="fa fa-search fa-lg"></i>
<input type="text" placeholder="Digite para filtrar..."
v-model="treeFilter" class="filter-field">
</div>
<Tree :data="treeData" :options="treeOptions"
:filter="treeFilter" ref="tree" />
</aside>
</template>
<script>
import { mapState } from 'vuex'
import Tree from 'liquor-tree'
import { baseApiUrl } from '@/global'
import axios from 'axios'
export default {
name: 'Menu',
components: { Tree },
computed: mapState(['isMenuVisible']),
data: function() {
return {
treeFilter: '',
treeData:
this.getTreeData(),
/*
[{"text":"Pedidos","children":[
{ "text": "Pedidos" },
{ "text": "Cotações" }
]},
{"text":"Clientes","children":[
{ "text": "Cadastro de Clientes" },
{ "text": "Posição Financeira" }
]},
{"text": "Consulta Estoque"},
{"text": "Histórico de Vendas"},
{"text": "Comissões"}
],
*/
treeOptions: {
//propertyNames: { 'text': 'name' },
filter: { emptyText: 'Opção não encontrada' }
}
}
},
methods: {
getTreeData() {
const url = `${baseApiUrl}/menu`
return axios.get(url).then(res => {
res.data
console.log(res.data)
})
},
onNodeSelect(node) {
this.$router.push({
name: 'articlesByCategory',
params: { id: node.id }
})
//aqui poderia tirar somente o IF para fechar depois que clicar
if(this.$mq === 'xs' || this.$mq === 'sm') {
this.$store.commit('toggleMenu', false)
}
}
},
mounted() {
this.$refs.tree.$on('node:selected', this.onNodeSelect)
}
}
</script>
<style>
.menu {
grid-area: menu;
background: linear-gradient(to right, #232526, #414345);
display: flex;
flex-direction: column;
flex-wrap: wrap
}
.menu a,
.menu a:hover {
color: #fff;
text-decoration: none;
}
.menu .tree-node.selected > .tree-content,
.menu .tree-node .tree-content:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.tree-arrow.has-child {
filter: brightness(2);
/* margin-left: 20px; */
}
.menu .menu-filter {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
padding-bottom: 8px;
border-bottom: 1px solid #AAA;
}
.menu .menu-filter i {
color: #AAA;
margin-right: 10px;
}
.menu input {
color: #CCC;
font-size: 1.3rem;
border: 0;
outline: 0;
width: 100%;
background: transparent;
}
.tree-filter-empty {
color: #CCC;
font-size: 1.3rem;
margin-left: 20px;
}
</style>
can You put the getTreeData() method which fetches the data via axios in the mounted or or created hook. I think if You put it in the return function of the data like the code above it does not work because getTreeData returns a promise and not the json.
More in deep : You can use an async function getTreeData (you can transform every Promise to an async function) then mounted is also async or You resolve the promise in the mounted function :
mounted(){
const url = `${baseApiUrl}/menu`
axios.get(url).then(res => {
this.treeData = res.data;
})
I'm with the same problem. I get the data from axios and putted the function on created() / mounted(), but doesn't work. The console.log is printed the data correctly.
I'm trying to load my JSON returned from the API, but it doesn't work, it could help me solve it.
Here is the code: