v-if within v-for

[PSanilP]

<div v-for="A in AnArrayOfObjects" v-if="A.name=='myname'">{{A}}</div>

v-if is failing within v-for
A is 'undefined'

Used to work with Vue2.0
Am I doing something wrong?

[sqllyw]

this might work:

  <div v-for="A in AnArrayOfObjects">
        <div v-if="A.name=='myname'">
          {{A}}
        </div>
      </div>
    

[PSanilP]

Yes it does work if you nest the divs, but inline v-for+v-if has its advantages. For eg; while creating tables or filtering rows or hiding system columns from datatable, I use v-for on <td> or <tr> and v-if on the value
The work-around I found is this

                <div v-for="A in t1.filter(e => {return (e.name === 'myname' || e.name === 'Second Name')})">
                    {{A}}
                </div>

Also needed when you loop through object and want to show specific key/value
<div v-for="k in Object.keys(obj1).filter(a => {return (a !='SomeKey')})">{{k}}:{{obj1[k]}}</div>

[halivert]

You can use the HTML element template for the if, it does not create an actual element in the DOM