Conditional v-bind in Vue.js

Question

Is there a way to put a v-bind:something conditionally?

I have this:

<div class="sample">
   <div class="some-stuff" :handle=".handle" />
</div>

I want the :handle bind to be conditionally activated.

Having it duplicated with a v-if like this:

<div class="sample">
   <div v-if="condition" class="some-stuff" :handle=".handle"/>
   <div v-else class="some-stuff" />
</div>

costs too much performance, as it has to rerender a bunch of stuff inside the .some-stuff div.

Answer 1

Give this a try:

<div class="sample">
   <div class="some-stuff"  v-bind="{ [condition && 'handle']: '.handle' }" />
</div>

Got idea from: Passing props dynamically to dynamic component in VueJS

And from docs:

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

https://vuejs.org/api/built-in-directives.html#v-bind