Vue draggable next get to property of list

Question

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>

Answer 1

See in the documentation the item slot has specifically named slot props:

Slot props:

• element the element in the list
• index 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>