3

I'm having a difficult time understanding slots for some reason and why they should even be used. The only reason I can think of that would be nice for usuage is if we can reference specific properties within a v-for loop of an element and output different templates quicker perhaps...

So, am thinking, and possibly I could be wrong in thinking this, but if I have a variable like so:

<script>
const items: [
    {
        label: 'My Label',
        url: '#',
        headerTitle: 'My Header Title'
    },
    {
        label: 'My Label 2',
        url: 'https://www.myurl.com',
        headerTitle: 'My Header Title 2'
    },
    {
        label: 'My Label 3',
        url: 'https://www.myurl3.com'
    }
]

export default {
    data () {
        return {
            items: items
        }
    }
}
</script>

And than in the template, possibly this:

<template>
    <div v-for="(item, index) in items" :key="item.id">
        <template slot-scope="headerTitle">
            <h1>{{ item.headerTitle }}</h1>
        </template>
        <template slot-scope="label">
            <div class="mylabel">
                {{ item.label }}
            </div>
        </template>
        <template slot-scope="url">
            <a :href="item.url">{{ item.label }}</a>
        </template>
    </div>
</template>

I don't know if this makes sense or not, but basically using the property as a slot-scope and than for everytime that property is defined, it will output something. But this doesn't work properly. Is this not what slot-scopes are for within component v-for loops? Is this not how to use these properties of an array of objects?

This kinda makes sense to me. Anyways to do it like this perhaps?

Solomon Closson
  • 6,111
  • 14
  • 73
  • 115
  • did you check this https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots ? – Boussadjra Brahim Nov 06 '18 at 01:22
  • Yes, I've tried to make sense out of all of that. No Luck there. I am trying to use object properties as slots instead. Figured `slot-scope` would come in handy here. Can slots/slot-scope not be used in this way? – Solomon Closson Nov 06 '18 at 01:35
  • This is all inside of 1 component. A simple array of objects, would like to organize the output of them by property if possible using slots or slot-scope, which I understand is a way to do this. Or am I mistaken? – Solomon Closson Nov 06 '18 at 01:37

0 Answers0