I am trying to build my own sortable component. I want to pass a list of items to it's default slot. The sortable component should then wrap all passed items with a custom v-draggable component.
<v-sortable handle=".handle">
<template :key="index" v-for="(item, index) in items">
<some-complex-component :item="item"></some-complex-component>
</template>
</v-sortable>
Now withn my v-sortable component I am trying to wrap all given nodes within default slot with a custom v-draggable component.
My v-sortable component looks like this:
import { h } from 'vue';
export default {
name: 'v-sortable',
props: {
handle: {
type: String,
required: false,
default: () => {
return null;
}
},
},
render () {
const draggableItems = this.$slots.default().map(slotItem =>
h('v-draggable', { handle: this.handle }, [slotItem])
)
return draggableItems;
}
}
This works as expected, except that my custom component v-draggable will not be rendered as a vue component. All items will be wrapped in html tags called <v-draggable>.
How would I have to proceed to actually parse the v-draggable component as Vue component?
Try to import it and register and use it directly :
import { h } from 'vue';
import VDraggable from 'path/to/v-draggable'
export default {
name: 'v-sortable',
props: {
handle: {
type: String,
required: false,
default: () => {
return null;
}
},
},
render () {
const draggableItems = this.$slots.default().map(slotItem =>
h(VDraggable, { handle: this.handle }, [slotItem])
)
return draggableItems;
}
}
It's recommended to pass items as prop and use them directly inside the render function :
<v-sortable handle=".handle" :items="items">
</v-sortable>
child component :
import { h } from 'vue';
import VDraggable from 'path/to/v-draggable'
export default {
name: 'v-sortable',
props: {
items:{
type:Array,
default: () =>[]
},
handle: {
type: String,
required: false,
default: () => {
return null;
}
},
},
render () {
const draggableItems = this.items.map(slotItem =>
h(VDraggable, { handle: this.handle }, [item])
)
return draggableItems;
}
}
The component can to be explicitly specified in render function:
h(VDraggable, ...)
Globally registered component that isn't available for import (e.g. from third-party libs) can be resolved from a name with resolveComponent.