CODEWITHSUNDEEP
vuejs2v-for
abu abu
abu abu

Reputation: 7042

Condition in v-for of vue.js?

I would like to avoid image value in below code.image is a key for property. How can I do that ?

<tbody>
    <tr v-for="obj in data" :id="obj.id">
       <td v-for="property in obj">{{property}}</td>
    </tr>
</tbody>

Upvotes: 10

Views: 27165

Answers (2)

Ben
Ben

Reputation: 5129

Let check it out: v-for with an Object, v-for with v-if.

<td v-for="(value, property) in obj" v-if="property!='image'">
    {{value}}
</td>

Upvotes: 5

Hal
Hal

Reputation: 1293

The Accepted answer is an anti-pattern because you should not mix v-for and v-if on the same node in VueJs 2+ as Thomas van Broekhoven pointed out. Instead, you can just chain a filter onto the object. Here is an example using an ES6 arrow function which should* work.

  • Untested syntax. Typing on my phone, in bed.
<tbody>
    <tr v-for="obj in data" :id="obj.id">
       <td v-for="property in obj.filter(property => property !== 'image')">{{property}}</td>
    </tr>
</tbody>

Upvotes: 17

Related Questions