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>
2 Answers
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>
1 Comment
JOG
eslint-plugin-vue errors tho, says
'v-for' directives require that attribute value.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>
6 Comments
abu abu
Thanks @Ben 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
Ben
also check for vuejs.org/v2/guide/list.html#v-for-with-an-Object
Ben
I guess you should try
<td v-for="(value, property) in obj" v-if="property!='image'">{{value}}</td>
Matt
^ That works and is much better than my mess of an answer.
Thomas van Broekhoven
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)
|
tdfor any object that has an image?{{property}}. But I would not like to print value ofimageproperty.propertyan object? Because the way you're callingproperty.imagesuggests that it is.propertyis a value. I am updating my question. I don't know how to do that's why I was callingproperty.image. Thanks