Custom Vue directive to omit tag but render tag's contents?

Viewed 1771

I'd like to create a custom Vue directive to omit the tag but render the tag's contents when the directive is true.

So for example, if the data for my vue instance is defined as

 data:{
    omitIt: true
 }

And if the markup looks like this:

 <div v-omit="omitIt" class="someClass">
      Hello world!
 </div>

When omitIt is set to false as it is above, I'd like the following rendered into the dom:

<div class="someClass">
      Hello world!
 </div>

But when omitIt is true I'd like only the following rendered into the dom:

Hello world!

I initially tried to solve this by doing the following (admittedly not a custom vue directive):

 <template v-if="!omitIt">
      <div class="someClass">
  </template>
  Hello world!
  <template v-if="!omitIt">
      </div>
  </template>

The above isn't pretty but I thought perhaps it would work. But alas what gets rendered into the dom when omitIt is false is:

 <div class="someClass"></div>
 Hello world!

Any suggestions on how to achieve the results I'm looking for?

2 Answers
Related