[Vuejs]-Is it possible to remove elements from template based on props VueJs

by

1👍

✅

You could use portal-vue for Vue 2 to move content to a specified target:

<template>
  <div>
    <portal :to="usePopup ? 'popup' : 'container'">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </portal>

    <Popup v-if="usePopup">
      <portal-target name="popup" />
    </Popup>
    <div v-else>
      <portal-target name="container" />
    </div>
  </div>
</template>

demo

1👍

first you srsly should read the docs Conditional Rendering

second, this is what you want:

<template>
    <div v-if="usePopup">
        <Popup> <--- the magic happens here
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        </Popup>
    </div>
    <div v-else>
     your normal div content
    </div>
</template>


<script>
export default {
    name: "dynamic-element-removal",
    created(){
        // If usePopup is false remove Popup so that only CustomComponent renders
    },
    props : {
        usePopup: {
            default : true,
            type : Boolean
        }
    }
}
</script>

Leave a comment