如何在设置 function 之外传递 div 元素

Question

我正在尝试将此添加到我的 vue 应用程序https://jsbin.com/yejehog/edit?html,js,console,output

我已添加到我的代码中，如何将 div id 传递给 Sortable.create？ 在我的控制台中，我收到错误Uncaught Sortable: el` must be an HTMLElement, not [object Null]

import { Sortable, Swap } from 'sortablejs/modular/sortable.core.esm';
Sortable.mount(new Swap());

let list = document.getElementById("list")

Sortable.create(list, {
  multiDrag: true,
  selectedClass: "selected"
});

 <div id="list" v-for="(item, index) in points.pointList.collection">
<p>{{ item.name}}</p>
</div>

这个也试过

    const clueDiv = ref(null)

  Sortable.mount(new Swap());

    Sortable.create(clueDiv.value, {
      multiDrag: true,
      selectedClass: "selected"
    });

    #list(v-for="(item, index) in points.pointList.collection" ref="clueDiv")

同样的错误

Answer 1

首先应该将list id 添加到包含使用 v-for 呈现的项目的包装器元素中，然后使用onMounted挂钩运行 init 可排序的 function：

<div id="list" ref="clueDiv">
  <div  v-for="(item, index) in points.pointList.collection">
   <p>{{ item.name}}</p>
  </div>
</div>

和：

 const clueDiv = ref(null)

onMounted(()=>{
 Sortable.mount(new Swap());

    Sortable.create(clueDiv.value, {
      multiDrag: true,
      selectedClass: "selected"
    });
})