Vue: Add "keep-children" argument to v-if

[oswaldofreitas]

What problem does this feature solve?

Imagine you have this component for wrapping an input:

<template>
  <div class="container">
    <input />
  </div>
</template>

Like in this case I have several others where I would like to make only the container enclosing tag conditionally visible, but keeping the input, so it would be:

<template>
    <input />
</template>

... depending on certain condition.

I know it's possible to achieve this using the render function, but it's too hard for me to maintain those (big in my case) components without really viewing the template as HTML itself.

What does the proposed API look like?

So, my suggestion is to add an argument to the v-if directive like "keep-children". This way I could do something like:

<template>
  <div v-if:keep-children="showContainer" class="container">
    <input />
  </div>
</template>

<script>
export default {
  props: ['showContainer']
}
</script>

[oswaldofreitas]

In the very simple example above I could just:

<template>
  <div v-if="showContainer" class="container">
    <input />
  </div>
  <input v-else />
</template>

but it's too verbose and imagining a big content inside the container all the code would be duplicated

[Justineo]

Yes currently we can only use render function to implement a conditional wrapper with a lot of content.

Instead of introducing a modifier for v-if, maybe I would rather use something like:

<template>
  <div v-transparent="!showContainer" class="container">
    <input />
  </div>
</template>

[jacekkarczmarczyk]

or v-omit

[sqal]

You can achieve it by creating really simple functional component https://jsfiddle.net/hpeocn97/

[posva]

As @sqal said this is feasible in userland with a functional component

[DoctorNasa]

googd

[oswaldofreitas]

I tried to apply this to my component that is not functional and I didn't achieve the desired result because I have multiple elements inside the container and the render function can't return multiple root node elements and I had to add all them into a div.
https://jsfiddle.net/hpeocn97/14/

[posva]

You can with a functional component, check this jsfiddle by @Akryum https://jsfiddle.net/Akryum/1ow9s73y/