Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v-if with array #677

Closed
flo-sch opened this issue Jan 14, 2015 · 13 comments
Closed

v-if with array #677

flo-sch opened this issue Jan 14, 2015 · 13 comments

Comments

@flo-sch
Copy link

flo-sch commented Jan 14, 2015

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
Copy link

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
Copy link
Author

flo-sch commented Jan 14, 2015

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

@multimeric
Copy link

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

@flo-sch
Copy link
Author

flo-sch commented Jan 14, 2015

So how could I do it ?

@multimeric
Copy link

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

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

@flo-sch
Copy link
Author

flo-sch commented Jan 14, 2015

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

@sureshamk
Copy link

<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
Copy link

seuaCoder commented Jun 9, 2017

same here

@vsg24
Copy link

vsg24 commented Nov 29, 2017

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

@LinusBorg
Copy link
Member

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
Copy link

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

@rounce
Copy link

rounce commented Jun 2, 2019

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

@JavascriptMick
Copy link

JavascriptMick commented Apr 20, 2021

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants