Creating a flexible range of Vue slots within a Render function

Question

Creating a flexible range of Vue slots within a Render function

I'm currently working on constructing a custom component using a render function.

The component being rendered can receive an unlimited number of slots. For instance, in the following example there are three available slots (named element_1, element_2, element_3).

The code snippet below utilizing Array.reduce() is intended to achieve the same as:

scopedSlots: {
  "element_1": () => createElement('div', 'hello world'),
  "element_2": () => createElement('div', 'hello world'),
  "element_3": () => createElement('div', 'hello world'),
}

This is a simplified version using Array.reduce():

const records = [
  {
    "index": 1,
  },
  {
    "index": 2,
  },
  {
    "index": 3,
  }
]

render: function (createElement) {
  return createElement("replicator-component", {
    attrs: { elements: records.length},

    scopedSlots: records.reduce((a,x) => ({...a, 
      ['element_' + x.index]: 
      () => { createElement( 'div', 'hello world') }}), {})
  });
},

Despite implementing this logic, nothing appears on the screen and no error messages are provided. Does anyone have any suggestions?

javascript arrays vue.js vue-component slot

Answer 1

Answer №1

The main distinction lies in the way the functions are created within your reduce function.

() => { createElement( 'div', 'hello world') }

versus how they are constructed in the hardcoded version (and also in the forEach loop in @Boussadjra's answer):

() => createElement('div', 'hello world')

In the latter case, the function actually return the created element. This difference is not related to the use of reduce, which is acceptable.

const ReplicatorComponent = {
      template: `<div>
        <h1>replicator-component</h1>
        <slot name='element_1'></slot>
        <slot name='element_2'></slot>
        <slot name='element_3'></slot>
      </div>`
    };

    const records = [
      { "index": 1 },
      { "index": 2 },
      { "index": 3 },
    ];

    Vue.component('my-component', {
      render: function(createElement) {
        return createElement(ReplicatorComponent, {
          attrs: {
            elements: records.length
          },
          scopedSlots: records.reduce((a,x) => ({
            ...a, 
            ['element_' + x.index]: () => 
              createElement( 'div', 'hello world')
           }), {})
        });
      },
    });

    new Vue({
      el: '#app',
      data: () => ({})
    });

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5b58486d1f0355">[email protected]</a>/dist/vue.js"></script>

    <div id="app">
      <my-component></my-component>
    </div>

Answer 2

The main distinction lies in the way the functions are created within your reduce function.

() => { createElement( 'div', 'hello world') }

versus how they are constructed in the hardcoded version (and also in the forEach loop in @Boussadjra's answer):

() => createElement('div', 'hello world')

In the latter case, the function actually return the created element. This difference is not related to the use of reduce, which is acceptable.

const ReplicatorComponent = {
      template: `<div>
        <h1>replicator-component</h1>
        <slot name='element_1'></slot>
        <slot name='element_2'></slot>
        <slot name='element_3'></slot>
      </div>`
    };

    const records = [
      { "index": 1 },
      { "index": 2 },
      { "index": 3 },
    ];

    Vue.component('my-component', {
      render: function(createElement) {
        return createElement(ReplicatorComponent, {
          attrs: {
            elements: records.length
          },
          scopedSlots: records.reduce((a,x) => ({
            ...a, 
            ['element_' + x.index]: () => 
              createElement( 'div', 'hello world')
           }), {})
        });
      },
    });

    new Vue({
      el: '#app',
      data: () => ({})
    });

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5b58486d1f0355">[email protected]</a>/dist/vue.js"></script>

    <div id="app">
      <my-component></my-component>
    </div>

Answer 3

Answer №2

After reading the Vue.js documentation, it seems that scoped slots are meant to be functions that receive props as their argument.

export default {
  render(createElement) {

    // ...
    // some other operations
    // ...

    // Scoped slots defined as
    // { name: props => VNode | Array<VNode> }
    scopedSlots: {
      default: props => createElement('span', props.text)
    },
  }
}

You might want to give this approach a try.

Alternatively, achieving the same result is possible with Vue's new unified v-slot system.

<!-- page component -->
<template>
  <some-component>
    <template v-for="slot in scopedSlots" v-slot:[slot]="props">
      hello {{props}}
    </template>
  </some-component>
</template>

<!-- some-component.vue -->

<template>
  <div>
    <slot v-for="slot in Object.keys($slots)" :name="slot"></slot>
  </div>
</template>

Answer 4

After reading the Vue.js documentation, it seems that scoped slots are meant to be functions that receive props as their argument.

export default {
  render(createElement) {

    // ...
    // some other operations
    // ...

    // Scoped slots defined as
    // { name: props => VNode | Array<VNode> }
    scopedSlots: {
      default: props => createElement('span', props.text)
    },
  }
}

You might want to give this approach a try.

Alternatively, achieving the same result is possible with Vue's new unified v-slot system.

<!-- page component -->
<template>
  <some-component>
    <template v-for="slot in scopedSlots" v-slot:[slot]="props">
      hello {{props}}
    </template>
  </some-component>
</template>

<!-- some-component.vue -->

<template>
  <div>
    <slot v-for="slot in Object.keys($slots)" :name="slot"></slot>
  </div>
</template>

Answer 5

Answer №3

The issue with the reduce method lies in the missing return statement before

createElement('div', 'hello world')

:

Complete illustration

const ReplicatorComponent = {

  template: `
 <div>
    <h1>replicator-component</h1>
    
    <slot name='element_1'></slot>
    <slot name='element_2'></slot>
    <slot name='element_3'></slot>
 </div>
`
}

const records = [{
    "index": 1,
  },
  {
    "index": 2,
  },
  {
    "index": 3,
  }
]



Vue.component('my-component', {
  render: function(createElement) {

    let slotContent = records.reduce((a, x) => ({ ...a,
      ['element_' + x.index]:
        () => {
        return  createElement('div', 'hello world')
        }
    }), {})
    return createElement(ReplicatorComponent, {
      attrs: {
        elements: records.length
      },
      scopedSlots: slotContent
    });
  },
})

var app = new Vue({
  el: '#app',

  data: () => ({})
})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5939080a5d7cb9d">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  test

  <my-component></my-component>
</div>

Answer 6

The issue with the reduce method lies in the missing return statement before

createElement('div', 'hello world')

:

Complete illustration

const ReplicatorComponent = {

  template: `
 <div>
    <h1>replicator-component</h1>
    
    <slot name='element_1'></slot>
    <slot name='element_2'></slot>
    <slot name='element_3'></slot>
 </div>
`
}

const records = [{
    "index": 1,
  },
  {
    "index": 2,
  },
  {
    "index": 3,
  }
]



Vue.component('my-component', {
  render: function(createElement) {

    let slotContent = records.reduce((a, x) => ({ ...a,
      ['element_' + x.index]:
        () => {
        return  createElement('div', 'hello world')
        }
    }), {})
    return createElement(ReplicatorComponent, {
      attrs: {
        elements: records.length
      },
      scopedSlots: slotContent
    });
  },
})

var app = new Vue({
  el: '#app',

  data: () => ({})
})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5939080a5d7cb9d">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  test

  <my-component></my-component>
</div>

Creating a flexible range of Vue slots within a Render function

Answer №1

Answer №2

Answer №3

Similar questions

Inferring object keys in Typescript using an array as a basis

Retain the updated select values even when the back button is pressed

Delete the selected background color from custom drop-down lists in versions of Internet Explorer 9 and earlier

Using Angular's $scope.$watch to dynamically generate an array and calculate the total based on the ng-model's length

Using MPI for sending a user-defined struct that contains a dynamic array - a guide

The npm outdated command reveals that there are some modules missing in the current version

Tips for setting NgForm value within an Observable and verifying its successful implementation

Can Django capture and store the name of the active user's logged-in browser in the database?

Tips for avoiding event listeners from being triggered multiple times

Making a REST API call with an ID parameter using Angular

What is the best way to include a property with a name in quotes to an object after it has already been declared?

How should values be properly stored in a constant using mongoose?

Troubleshooting Offline.js

Is there a way to lock an element's position on a webpage once it reaches a specific point?

Navigate through nested HTML lists using jQuery

Information is not readily available through API utilization

Tips on searching for an entry in a database with TypeScript union types when the type is either a string or an array of strings

Analyzing JSON and organizing arrays with multiple values into groups

Using the $.ajax function with the PUT method and sending an OPTIONS request

Having trouble sorting elements in Vue using array sort on mobile devices?