Can someone point me to the error I make in this plain simple example. Want to display the title property but I misinterpreted some docs I guess.
Is there a specific property that should be set to get to the title property?
<template>
<div id="app">
<draggable :list="cards" group="cards" itemKey="id">
<template #item="{card }">
<div class="card">
<h2>{{ card.title }}</h2>
</div>
</template>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
cards: [
{
id: 1,
title: 'Veld 1'
},
{
id: 2,
title: 'Veld 2'
}
],
};
}
};
</script>
<style>
.card {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
background-color: #f0f0f0;
}
.sub-card {
border: 1px solid #ccc;
margin: 5px;
padding: 5px;
background-color: #e0e0e0;
}
</style>
See in the documentation the item
slot has specifically named slot props:
Slot props:
element
the element in the listindex
the element index
Whatever array of items you provide via the list
prop this slot will provide a single item from that array as element
. The object properties of your item will still be accessible so you can still use element.title
to get your title property.
<template #item="{ element }">
<div class="card">
<h2>{{ element.title }}</h2>
</div>
</template>