1

Tenho a seguinte array de objetos abaixo. Eu preciso listar em um v-for apenas os registros em que a variável parent seja igual a 4, e não estou conseguindo.

Código:

this.full_category_list = [
    {
        id: 1, 
        name: 'Sólido',
        parent : 0,
    },
    {
        id: 2, 
        name: 'Líquido',
        parent : 0
    },
    {
        id: 3, 
        name: 'Madeira',
        parent : 1
    },
    {
        id: 4, 
        name: 'Ferro',
        parent : 1
    },
    {
        id: 5, 
        name: 'Chapas',
        parent : 4
    },
    {
        id: 6, 
        name: 'Tubos',
        parent : 4
    },
    {
        id: 7, 
        name: 'Vigas',
        parent : 4
    },
];
1
  • 1
    Crie uma propriedade computada que filtre essa lista. E no v-for use essa propriedade.
    – bfavaretto
    Commented 25/10/2018 às 17:02

1 Resposta 1

10

Você pode usar o computed para resolver o problema.

Assim:

new Vue({

    el: '#app',

    data: {

        meus_valores: [/** **/]
    },


    computed: {

        meus_valores_filtrados: function () {

            return meus_valores.filter(function (valor) {
                return valor.parent === 4;
            })
        }
    }
})

Na sua view, você exibe assim:

<li v-for="valor in meus_valores_filtrados">
    <!-- sua lógica aqui ->
</li>

Montei um exemplo no snippet, para você ver funcionando "ao vivo".

Veja aí:

new Vue({
    el: '#app',
    data: {

        valores: [

            {
                   id: 1, 
                   name: 'Sólido',
                   parent : 0,
            },

            {
                   id: 2, 
                   name: 'Líquido',
                   parent : 0
            },

            {
                   id: 3, 
                   name: 'Madeira',
                   parent : 1
            },

            {
                   id: 4, 
                   name: 'Ferro',
                   parent : 1
            },

            {
                   id: 5, 
                   name: 'Chapas',
                   parent : 4
            },

            {
                   id: 6, 
                   name: 'Tubos',
                   parent : 4
            },

            {
                   id: 7, 
                   name: 'Vigas',
                   parent : 4
            },

        ]
    },

    computed: {

        valores_filtrados: function () {

            return this.valores.filter(function (valor) {
                return valor.parent === 4;
            })
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
    <li v-for="valor in valores_filtrados">
       {{ valor.id }} - {{ valor.name }}
    </li>
</div>

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 .