Different ways to display a static content list using Vue's named slots

Question

Different ways to display a static content list using Vue's named slots

I'm struggling to make the following setup work:

My parent template

<comp>
  <a href="#" slot="links">link 1</a>
  <a href="#" slot="links">link 2</a>
</comp>

and in my component comp, the template looks like this:

<ul class="comp">
  <li class="comp-item"><slot name="links"></slot></li>
</ul>

Right now, all my anchors are going into that single li tag (which is expected), but I want to have multiple li elements for each named slot I insert, like so:

<ul class="comp">
  <li class="comp-item"><a href="#" slot="links">link 1</a></li>
  <li class="comp-item"><a href="#" slot="links">link 2</a></li>
</ul>

Is there a way to achieve this without using scoped slots? Since my content is pure HTML, I feel it's unnecessary to wrap static content inside props to render them.

Most Vue UI frameworks seem to require using another custom component for each list item, which seems like overkill for this issue. Is there an alternative approach?

javascript vue.js vuejs2 components slot

Answer 1

Answer №1

You can easily achieve this using a render function.

Vue.component("comp", {
  render(h){
    let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
    return h('ul', {class: 'comp'}, links)
  }
})

Check out this example in action:

console.clear()

Vue.component("comp", {
  render(h){
    let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
    return h('ul', {class: 'comp'}, links)
  }
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <comp>
    <a href="#" slot="links">link 1</a>
    <a href="#" slot="links">link 2</a>
  </comp>
</div>

Alternatively, you can utilize a small utility component to render vNodes with a template like so:

Vue.component("vnode", {
  functional: true,
  render(h, context){
    return context.props.node
  }
})

Vue.component("comp", {
  template: `
    <ul class="comp">
      <li class="comp-item" v-for="link in $slots.links"><vnode :node="link" /></li>
    </ul>
  `
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <comp>
    <a href="#" slot="links">link 1</a>
    <a href="#" slot="links">link 2</a>
  </comp>
</div>

Answer 2

You can easily achieve this using a render function.

Vue.component("comp", {
  render(h){
    let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
    return h('ul', {class: 'comp'}, links)
  }
})

Check out this example in action:

console.clear()

Vue.component("comp", {
  render(h){
    let links = this.$slots.links.map(l => h('li', {class: "comp-item"}, [l]))
    return h('ul', {class: 'comp'}, links)
  }
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <comp>
    <a href="#" slot="links">link 1</a>
    <a href="#" slot="links">link 2</a>
  </comp>
</div>

Alternatively, you can utilize a small utility component to render vNodes with a template like so:

Vue.component("vnode", {
  functional: true,
  render(h, context){
    return context.props.node
  }
})

Vue.component("comp", {
  template: `
    <ul class="comp">
      <li class="comp-item" v-for="link in $slots.links"><vnode :node="link" /></li>
    </ul>
  `
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <comp>
    <a href="#" slot="links">link 1</a>
    <a href="#" slot="links">link 2</a>
  </comp>
</div>

Answer 3

Answer №2

If you want to utilize scoped slots instead of regular slots, here is how you can do it:

Within your comp component, ensure that it receives a prop called links, which should be an array of links (initialized as a custom option). Iterate through the links and pass each individual link as data to the slot, similar to passing props to a component.

Vue.component("comp", {
  template: `
    <ul class="comp">
      <li class="comp-item" v-for="link in links">
          <slot v-bind="link"></slot>
      </li>
    </ul>
  `,
  props: ["links"]
})

new Vue({
  el: "#app",
  // custom static option , accessed using vm.$options.links
  links: [
      {text: "link1"},
      {text: "link2"},
      {text: "lin3"}
  ]
})

In the parent component where the comp component is being used, make sure to use a <template> element with the special attribute slot-scope, indicating that it is a template for a scoped slot.

The value assigned to slot-scope will be the name of a temporary variable holding the props object passed from the child:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <comp :links="$options.links">
      <template slot-scope="link">
          <a href="#">{{link.text}}</a>
      </template>
  </comp>
</div>

You can view a working example on this JSFiddle link

Answer 4

If you want to utilize scoped slots instead of regular slots, here is how you can do it:

Within your comp component, ensure that it receives a prop called links, which should be an array of links (initialized as a custom option). Iterate through the links and pass each individual link as data to the slot, similar to passing props to a component.

Vue.component("comp", {
  template: `
    <ul class="comp">
      <li class="comp-item" v-for="link in links">
          <slot v-bind="link"></slot>
      </li>
    </ul>
  `,
  props: ["links"]
})

new Vue({
  el: "#app",
  // custom static option , accessed using vm.$options.links
  links: [
      {text: "link1"},
      {text: "link2"},
      {text: "lin3"}
  ]
})

In the parent component where the comp component is being used, make sure to use a <template> element with the special attribute slot-scope, indicating that it is a template for a scoped slot.

The value assigned to slot-scope will be the name of a temporary variable holding the props object passed from the child:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <comp :links="$options.links">
      <template slot-scope="link">
          <a href="#">{{link.text}}</a>
      </template>
  </comp>
</div>

You can view a working example on this JSFiddle link

Answer 5

Answer №3

If you prefer not to store your data in an array and display a list using v-for

You have the option to place all of them directly in the component without using a slot:

<ul class="custom-comp">
  <li class="comp-item"><a href="#">link 1</a></li>
  <li class="comp-item"><a href="#">link 2</a></li>
</ul>

Alternatively, you can use a slot:

<custom-comp>
  <ul class="custom-comp" slot="links">
    <li class="comp-item"><a href="#">link 1</a></li>
    <li class="comp-item"><a href="#">link 2</a></li>
  </ul>
</custom-comp>

Answer 6

If you prefer not to store your data in an array and display a list using v-for

You have the option to place all of them directly in the component without using a slot:

<ul class="custom-comp">
  <li class="comp-item"><a href="#">link 1</a></li>
  <li class="comp-item"><a href="#">link 2</a></li>
</ul>

Alternatively, you can use a slot:

<custom-comp>
  <ul class="custom-comp" slot="links">
    <li class="comp-item"><a href="#">link 1</a></li>
    <li class="comp-item"><a href="#">link 2</a></li>
  </ul>
</custom-comp>

Different ways to display a static content list using Vue's named slots

Answer №1

Answer №2

Answer №3

Similar questions

Tips for incorporating an additional dataset bar using chart.js

Tips for Sending Emails from an Ionic Application without Utilizing the Email Composer Plugin

Creating a multipart/form-data request using JavaScript/jQuery

Having trouble making the menu stay at the top of the page in IE7

Tips on transforming two same-length arrays into a single array of objects using JavaScript

Having trouble with asynchronous JSON calls in JavaScript when setting async to false

Utilizing multiple optional key values in Vue Router

Transitioning from ng-repeat filter to Typescript

Troubleshooting: Dealing with the issue of the inability to locate a module using the "@" path during VueJS unit testing

The PasswordResetView in Django using Vue.js encounters a 403 Forbidden error when attempting to post with Axios due to an

Issues with integrating VUE frontend with PHP backend and API

The data in AngularJS is not being successfully incorporated into the service

Tips for displaying Ajax response in a modal popup

Issue regarding ports: deployment of a project using vue.js and node.js on Heroku encountered errors

What methods are available to modify the colors in an Apex bar chart?

Problem with the WP Rocket helper plugin that excludes JS scripts from Delay JS only at specific URLs

The argument provided needs to be a function, but instead, an object instance was received, not the original argument as expected

Integrating SCORM with Vue.js and Laravel for dynamic e-learning functionality

Locating Elements in Protractor: Exploring Nested Elements within an Element that is Also a Parent Element Elsewhere on the Page

How can you target the current component and use createElement within VueJS?