v-if on a DIV but always display its contents with Vue.js?

Question

With Vue.js I need to toggle a parent-div, but always show the child-div.

<div v-if="showparent" class="parent">
  <div class="child"> 
    Child should always be visible
  </div>
</div>

As far as I know this is not possible with Vue.js. The v-if directive removes all div's inside when showparent is false.

Any ideas how to achieve this?

Answer 1

I have found two ways to do what you want to achieve, first one is to just repeat the child code in a v-else (not optimal because you need to repeat the code..) :

<div v-if="showparent" class="parent">
  <div class="child"> 
    Child should always be visible
  </div>
</div>
<div v-else class="child">
    Child should always be visible
</div>

---

Or you can create a custom component:

export default {
    name: "v-if-parent",
    props: {
        condition: {
            type: Boolean,
            required: true
        },
        fallbackWrap: {
            type: String,
            default: 'div'
        }
    },
    render(el) {
        if (this.condition) {
            let parent = this.$scopedSlots.parent()[0];
            if (typeof this.$scopedSlots.default === 'function')
                parent.children = this.$scopedSlots.default();
            return parent;
        } else if (typeof this.$scopedSlots.default === 'function') {
            let children = this.$scopedSlots.default();
            if (children.length > 1) {
                //We can only return a single vnode so if multiple children, wrap them in a div
                return el(this.fallbackWrap, null, children)
            }
            return children[0];
        }
        return null;
    }
}

And then use it like this

<v-if-parent :condition="showparent" fallback-wrap="span">
  <template #parent><a href="somelink" /></template>
  This text is always visible <span>You can include absolutely whatever you want in the default slot</span>
</v-if-parent>