Condition in v-for of vue.js?

Question

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>

Zechariah

I'm not really sure what you're asking. What are you trying to do? Not make a td for any object that has an image? – Kerakerala

Thanks @HEATH3N for your reply. There are different values in {{property}}. But I would not like to print value of image property. – Zechariah

So is property an object? Because the way you're calling property.image suggests that it is. – Kerakerala

No, property is a value. I am updating my question. I don't know how to do that's why I was calling property.image. Thanks – Zechariah

I'm voting to close this question as off-topic because On SO, you are expected to try to write the code yourself. After doing more research if you have a problem you can post what you've tried with a clear explanation of what isn't working and providing a Minimal, Complete, and Verifiable example within the question itself. – Succussion

See vuejs.org/style-guide/… – Montherlant

Answer 1

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>

Pelite

Thanks @Pelite for your reply. I tried like this <td v-for="property in obj" v-if="!property.image">{{property}}</td>. But it is not working. Thanks – Zechariah

also check for vuejs.org/v2/guide/list.html#v-for-with-an-Object – Pelite

I guess you should try <td v-for="(value, property) in obj" v-if="property!='image'">{{value}}</td> – Pelite

^ That works and is much better than my mess of an answer. – Kerakerala

Note that it’s not recommended to use v-if and v-for together. Refer to style guide for details. (vuejs.org/v2/guide/list.html#v-for-with-v-if) – Cusick

I.e. "When they exist on the same node, v-if has a higher priority than v-for. That means the v-if condition will not have access to variables from the scope of the v-for" -- vuejs.org/guide/essentials/list.html#v-for-with-v-if – Menispermaceous

Answer 2

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>

Zootomy

eslint-plugin-vue errors tho, says 'v-for' directives require that attribute value. – Ralaigh