A guide to leveraging Vue's Dynamic Component with a Fragment

Question

A guide to leveraging Vue's Dynamic Component with a Fragment

Is it feasible to utilize Vue's <component> element to selectively display a component or nothing at all?

Let's consider the following scenario:

<component :is="hasTooltip ? 'CustomTooltip' : 'div'">
  <div>Hover over me!</div>
</component>

In this example, we are showing a CustomTooltip component when the value of hasTooltip is true, otherwise we are displaying a regular div. Is there a way to display a fragment instead of this div (similar to React's <> fragment) that will be removed in the browser? How can this be achieved? I am using Vue 2.0.

Simply rendering the component based on conditions will not suffice as we still want the "Hover over me!" text to appear.

javascript vue.js vuejs2 vuejs3

Answer 1

Answer №1

Could a solution similar to this work?

Vue.component('tooltip', {
  template: `<div> Tooltip for: <slot></slot> </div>`
})

Vue.component('wrap-if', {
  functional: true,
  props: ['wrap', 'wrapper'],
  render(h, ctx) {
    
    if (ctx.props.wrap) {
      return h(ctx.props.wrapper, ctx.data, ctx.children)
    } else {
      // Potentially verifying that children.length === 1 since Vue 2 doesn't support fragments
      return ctx.children
    }
  }
})

new Vue({
  el: '#app',
  data: {
    wrap: true
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f292a3a1f6d7169716e6b">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <wrap-if :wrap="wrap" wrapper="tooltip">
      <span>This is always rendered no matter what</span>
  </wrap-if>
  <br>
  <button @click="wrap = !wrap">Toggle</button>
  <pre>{{$data}}</pre>
</div>

Answer 2

Could a solution similar to this work?

Vue.component('tooltip', {
  template: `<div> Tooltip for: <slot></slot> </div>`
})

Vue.component('wrap-if', {
  functional: true,
  props: ['wrap', 'wrapper'],
  render(h, ctx) {
    
    if (ctx.props.wrap) {
      return h(ctx.props.wrapper, ctx.data, ctx.children)
    } else {
      // Potentially verifying that children.length === 1 since Vue 2 doesn't support fragments
      return ctx.children
    }
  }
})

new Vue({
  el: '#app',
  data: {
    wrap: true
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f292a3a1f6d7169716e6b">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <wrap-if :wrap="wrap" wrapper="tooltip">
      <span>This is always rendered no matter what</span>
  </wrap-if>
  <br>
  <button @click="wrap = !wrap">Toggle</button>
  <pre>{{$data}}</pre>
</div>

Answer 3

Answer №2

Combining various insights from different comments, I have compiled them into a cohesive answer.

It seems like there is no straightforward way to conditionally wrap a component in Vue-2 without using a plugin, due to the absence of fragments.

Nevertheless, this issue can be resolved by either utilizing a Vue-2 fragment plugin or, in Vue3, employing the fragment component. For more information, refer to this response. Instead of displaying the div, display the fragment.

Answer 4

Combining various insights from different comments, I have compiled them into a cohesive answer.

It seems like there is no straightforward way to conditionally wrap a component in Vue-2 without using a plugin, due to the absence of fragments.

Nevertheless, this issue can be resolved by either utilizing a Vue-2 fragment plugin or, in Vue3, employing the fragment component. For more information, refer to this response. Instead of displaying the div, display the fragment.

A guide to leveraging Vue's Dynamic Component with a Fragment

Answer №1

Answer №2

Similar questions

Filtering data in Angular based on specific dates

Unable to establish a connection with the node at http://localhost:8545

How can I stop Jquery Mobile from processing the URL hash?

Comparing Ajax methods: Which one reigns supreme?

Ensure that all the checkboxes in a specific column are selected for every row within the gridview

New ways to update Vue.js data without the need to bind HTML to methods

Creating Customizable Badges That Can Be Embedded in Laravel

Transmitting a JSON string to my backend system to insert into my database, but unfortunately, no data is being added

Vue.js: Issue with dynamically calculating class property

Implementing Vue Js checkboxes using dynamic JSON data

Embedding Google+ Sharing in an iframe

I am looking to determine the number of instances where the element 500 appears in each column (1-4) of an HTML table using jQuery or JavaScript. What would be the best approach to achieve this goal?

Add a new division to a component when a specific event handler is triggered by another component using React and the reduce method

How to select child elements of the <video> tag using jQuery

Observing the Result of a Function within a Controller Using Ng-Repeat in a Directive

Incorporating modules through System.JS

Input Error in ASP.NET JavaScript

Steps to resolve the Firebase alert stating "you're currently utilizing the development version of Firebase"

Make sure the division remains fixed even when the window is resized

Vue-CLI-Service CPU Performance