Condition in v-for of vue.js?

vuejs2 v-for
abu abu picture abu abu · Dec 18, 2017 · Viewed 10.5k times · Source

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>

Answer

Hal picture Hal · Sep 9, 2020

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>

Related questions

Vue Js - Loop via v-for X times (in a range)

How can I repeat a loop via v-for X (e.g. 10) times? // want to repeat this (e.g.) 10 times <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item.price }} </li> </ul> …

Read More
Vue.js v-for loop from an object key and nested array

I have quiet a complex v-for loop inside another v-for. Basically displays a list of questions and a list of answers for that question. I plan on getting the key for the question and using that for the key for …

Read More
Set a variable inside a v-for loop on Vue JS

I have a v-for loop with vue.js on a SPA and I wonder if it's posible to set a variable at the beginning and then just print it everytime you need it, because right now i'm calling a method …

Read More