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

Learn how to retrieve data from the console and display it in HTML using Angular 4

Tips for incorporating JavaScript into elements that have been modified using jQuery's .html() method

Selected value is not displayed in the textbox when using autocomplete feature

Learn how to retrieve information using the dash operator in ReactJS

Is there a simpler method to access the source element for an event?

Trouble with reading from a newly generated file in a node.js program

Performing JavaScript functions after fetching an XSLT page via AJAX

IE Script loading

Solving routing issues using object constructors in expressjs

Using TypeScript with Watermelondb

Incorporating the id attribute into the FormControl element or its parent in Angular 7

Creating a nested object in React's handleChange method: a step-by-step guide

Confusion arises between Bootstrap button plugin and Vue checkbox click event

Configuring Visual Studio Publish settings for Single Page Applications deployed on Azure

Is combining Nuxt 3 with WP REST API, Pinia, and local storage an effective approach for user authentication?

Adding a promise to an array using Javascript

Tally each div individually and display the count within each div, instead of showing the total count across

Styling of Bootstrap HTML element not appearing as expected

Steps for generating a hierarchical menu utilizing data from a CSV file

Add new data to an existing array in Angular 7 without overwriting it