vue3中使用vuedraggable报错Cannot read properties of undefined (reading 'header')

在Vue3中使用vuedraggable时，如果出现Cannot read properties of undefined (reading 'header')的报错，一般情况下是因为没有正确地绑定数据或者数据为空导致的。解决该问题的方法如下：

1. 确认数据是否正确绑定。在使用vuedraggable时，需要将数据正确地绑定到组件中，例如：

<draggable v-model="list">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>

其中，v-model绑定了list数据，v-for循环渲染了每个item。

2. 确认数据是否为空。如果数据为空，就会出现Cannot read properties of undefined的报错。可以在使用数据前先判断数据是否为空，例如：

<draggable v-if="list && list.length" v-model="list">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>

其中，v-if判断了list是否为空，如果不为空才会渲染draggable组件。

3. 确认数据中的属性是否正确。如果报错信息中指向的是某个属性，就需要确认该属性是否正确存在于数据中。可以在使用数据前先判断该属性是否存在，例如：

<draggable v-if="list && list.length" v-model="list">
  <div v-for="item in list" :key="item.id">
    <div v-if="item.header">{{ item.header }}</div>
    <div>{{ item.name }}</div>
  </div>
</draggable>

其中，v-if判断了item.header是否存在，如果存在才会渲染该div。