Menu
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>
742
In VueJs, we can simply write a conditional class by binding it, and to do so all we need to do is to use the v-bind:class we can also write it in the short form as :class Both are applicable and will do the same work.
The directive v-if is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
The v-text directive is a Vue. js directive used to update a element's textContent with our data. It is just a nice alternative to Mustache syntax. First, we will create a div element with id as app and let's apply the v-text directive to this element with data as a message.
Short answer: Use v-if if the condition won't change that often. Use v-show if you want to toggle the condition more often. Note: v-show does not remove the element from the DOM if your condition is false.
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.
<tbody>
<tr v-for="obj in data" :id="obj.id">
<td v-for="property in obj.filter(property => property !== 'image')">{{property}}</td>
</tr>
</tbody>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
