liquor-tree icon indicating copy to clipboard operation
liquor-tree copied to clipboard

doubt for JSON loader

Open maximomarcos opened this issue 4 years ago • 6 comments

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:

menu

maximomarcos avatar May 08 '20 20:05 maximomarcos

could someone help please

maximomarcos avatar May 13 '20 20:05 maximomarcos

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 ?

erhard avatar May 14 '20 15:05 erhard

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>

maximomarcos avatar May 14 '20 16:05 maximomarcos

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.

erhard avatar May 14 '20 17:05 erhard

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;             
     
})

erhard avatar May 14 '20 17:05 erhard

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.

byander avatar Oct 02 '20 19:10 byander