VUE value filter in v-for

Question

VUE value filter in v-for

Navigation

#1 by (8 votes)

0

I have the following array of objects below. I need to list in a v-for only the records where the variable parent is equal to 4 , and I'm not getting it.

Code:

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
    },
];

vue.js vue.js-2

asked by anonymous 25.10.2018 / 18:59

1 answer

How do I make the alert fade after I display it on a div? Find Array Value in Object

score 8 · Accepted Answer

You can use computed to solve the problem.

So:

new Vue({

    el: '#app',

    data: {

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


    computed: {

        meus_valores_filtrados: function () {

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

In your view, you display like this:

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

I've put an example in the snippet so you can see it working "live."

See there:

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><divid="app">
    <li v-for="valor in valores_filtrados">
       {{ valor.id }} - {{ valor.name }}
    </li>
</div>