Vue3-Draggable获取数组数据后无法在拖拽区域显示问题求助

问题场景 #

克隆Vue3-Draggable项目后，将数据源替换为自定义fetch请求返回的普通数组。页面底部<pre>标签能正常展示returnedItems数组内容，Vue开发者工具也显示该数组有效，但左侧拖拽区域无法渲染数组项。需先解决普通数组的显示问题，后续再改为对象数组。

问题原因 #

1. 插槽语法错误：左侧Draggable组件使用了v-slot:item[0]，该语法仅针对数组中索引为0的单个项渲染插槽，而非遍历所有数组项。
2. 响应式变量定义错误：在选项式API的data中用ref()包裹returnedItems，后续直接赋值this.returnedItems = data会覆盖ref对象，导致响应式异常（虽然pre能显示数据，但Draggable组件无法正确监听数组变化）。

修复方案 #

• 修正插槽语法：将左侧Draggable的插槽改为通用遍历插槽v-slot:item="{ item }"，与右侧组件写法一致。
• 调整响应式变量：在data中直接定义returnedItems: []，无需用ref()包裹（选项式API的data属性自动具备响应式）。
• 保持fetch赋值逻辑不变，确保返回的data是有效数组。

修正后的完整代码 #

<template>
  <div class="container">
    <div class="left">
      <draggable
        v-model="returnedItems"
        transition="100"
        class="drop-zone"
      >
        <!-- 修正插槽语法：移除[0]，使用通用item插槽遍历所有项 -->
        <template v-slot:item="{ item }">
          <div class="draggable-item">
            {{ item }}   <!-- 普通数组直接渲染item值 -->
          </div>
        </template>
      </draggable>

      <pre>{{ JSON.stringify(returnedItems, undefined, 4) }}</pre>
    </div>

    <div class="right">
      <draggable
        v-model="items2"
        transition="100"
        class="drop-zone"
      >
        <template v-slot:item="{ item }">
          <div class="draggable-item">
            {{ item.title }}
          </div>
        </template>
      </draggable>

      <pre>{{ JSON.stringify(items2, undefined, 4) }}</pre>
    </div>
  </div>
</template>

<script>
import Draggable from "./components/DraggableContainer";
// 移除ref导入，因为选项式API的data无需手动使用ref
export default {
  name: "Sample",
  components: {
    Draggable
  },
  data() {
    return {
      items1: Array(5)
        .fill({})
        .map((_, index) => ({ title: `Item ${index + 1}` })),
      items2: [],
      // 修正：直接定义空数组，无需ref包裹
      returnedItems: [],
    };
  },
  mounted() {
    fetch("http://localhost:5081/Install/GetInstall")
      .then((response) => {
        if (!response.ok){
          console.log("请求失败");
        }
        return response.json();
      })
      .then((data) => {
        this.returnedItems = data;
        console.log("返回数据:", data);
        console.log("当前数组:", this.returnedItems);
      })
      .catch((error) => {
        console.error("请求错误:", error);
      })
  }
};
</script>

内容的提问来源于stack exchange，提问作者Bigbear