I've got an array of contacts
, which contain either a single person with a name
or a group with a name
and members
.
I want the groups to be outlined but still wrap. I can get it to work in a display state but the outline breaks when incorporate vue-draggable.
Here is a minimal example: https://codepen.io/FiveSecDelay/pen/BagGVgb
Is there a way to keep the groups outlined like the wanted result?
Code in pen:
Draggable:
<div class="groupContainer">
<p class="group">
<draggable v-model="modules.contacts" group="contacts" handle=".handle" item-key="id">
<template #item="{ element }">
<span v-if="element.members?.length > 0" class="contactGroup handle">
{{ element.name }}[{{ element.members.length }}]=
<draggable v-model="element.members" group="contacts" handle=".handle" item-key="id">
<template #item="{ element: groupMember }">
<span class="handle">
{{ groupMember.name }},
</span>
</template>
</draggable>
</span>
<span v-else class="handle">
{{ element.name }},
</span>
</template>
</draggable>
</p>
</div>
<div>
Wanted Result:
<div class="groupContainer">
<span v-for="contact in modules.contacts" :key="contact.name">
<span v-if="contact.members?.length > 0" class="contactGroup">
{{ contact.name }}[{{ contact.members.length }}]=
<span v-for="groupMember in contact.members" :key="groupMember.name">
{{ groupMember.name }},
</span>
</span>
<span v-else>{{ contact.name }}, </span>
</span>
</div>
</div>
I was able to fix by adding tag="span'
to the draggable
elements.
<draggable tag="span" v-model="modules.contacts" group="contacts" handle=".handle" item-key="id">