Add "keep-children" argument to v-if

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>

[sqal]

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

[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>