v-if with array

[flo-sch]

Could v-if exclude empty arrays ?
Or is there another way to do it ?

For instance, imagine the given Vue :

<section id='container'>
    <div id='list-wrapper' v-if='list << I would here mean : "if list is not empty" >>'>
        <h5>List of things</h5>
        <ul>
            <li v-repeat='item: list'>{{ item }}</li>
        </ul>
    </div>
</section>

new Vue({
    el: '#container',
    data: function () {
        return {
            list: []
        }
    },
    events: {
        'list:add': function (item) {
            this.list.push(item);
        }
    }
});

When list is an empty array, I would prefer the content of <div id='list-wrapper'></div> not to be included in the DOM.
I would prefer it to be included only when I push some items in my listarray.

[multimeric]

v-if: Conditionally insert / remove the element based on the truthy-ness of the binding value.

So you just need to think of a javascript expression that will evaluate to false if the array is empty...

[flo-sch]

Like checking, at any mutation of the graph, and when the array become empty, set it to false ?

[multimeric]

No you don't have to check for array mutation, Vue will do that for you.

[flo-sch]

So how could I do it ?

[multimeric]

<div id='list-wrapper' v-if="list.length > 0">
</div>

And here's a fiddle: http://jsfiddle.net/4t6hjwev/1/

[flo-sch]

Oh, okay, I just didn't realize I could access the array properties inside the directive.
Thanks !

[sureshamk]

<tr v-if="isVisibleDetailRow(item[detailRowId])"> show detail </tr>

here item is an array and detailRowId is contains dynamic data.

But i m getting ReferenceError: detailRowId is not defined

How its possible to handle this kind of access?

[seuaCoder]

same here

[vsg24]

Sadly v-if is very unreliable. It often gives me an undefined error.

[LinusBorg]

I'm sorry to hear that.

But I have a question: What exactly are we supposed to do with that statement, posted to a two year old, closed issue with zero information about the exact problem?

[russellstrauss]

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

[rounce]

<div id='list-wrapper' v-if="list && list.length > 0">
</div>

[JavascriptMick]

it's pretty clumsy, what if you want v-if when the array is empty...

<div id='list-wrapper' v-if="!list || list.length == 0">
   List is null or empty.... better do something to fill it here
</div>