[SOLVED] Render directive conditionally

Render directive conditionally

I've been struggling all day to find a way to conditionally render a directive on an element. I ended up on this page: https://vuejs.org/guide/extras/render-function.html but then I wasn't able to append my compiled template (using vue-template-compiler, since I'm using some version of vue which doesn't include the compiler).

At the end of the day this is what I figured:

<div>Some foo</div>
<template v-if="withDirective">
  <input :value="value"
         :disabled="disabled"
         :type="type"
          v-some-directive="someValue" />
</template>
<template v-else>
  <input :value="value"
         :disabled="disabled" 
         :type="type" />
</template>
<div>Some bar</div>

Is there a better way? I have a lot more attributes on the input, so there's really a lot of duplicate code which I would love to avoid. This html is inside a custom component, so all the values like disabled, required, etc, are props passed from outside.

Solution

The best way I found so far is compiling a string template conditionally using compileToFunctions. So instead of having the template tags and the v-if in the template, I simply add the conditional directive(s) before compiling the component.

ATTENTION

Keep in mind that the compilation is runtime, I don't have enough experience with Vue (yet) to tell if this way is faster than using v-if. What is sure is that we saved a lot of duplicate lines in the template, which is handy when editing common parts.