Vue.js v-if for attributes

Question

Let's say I have this code

table(my-attr="value")
    ...complex component Jade...

and I would like render that my-attr base on property delivered into component. Since v-if works on whole element I cannot do something like

table(my-attr="value", v-if="myProp")
table(v-else)

because I would have to duplicate all the code inside table.

How can I achieve that?

Answer 1

You can use v-bind or interpolate the value directly with {{}}

// (sorry, no jade)
<table v-bind:attribute1="someMethod" attribute2="{{anotherMethod}}">

Now someMethod and anotherMethod should be data, computed properties, or methods of your component, and should return either the attribute's desired value or false. In the latter case, the attribute will not be added to the element at all.

Update: Note that interpolations in attributes have been removed in Vue 2