为什么我不能在 Vue3 设置中使用 Dragula 但已安装？

问题描述

当我在 vue3 设置中使用 dragula 时。它不起作用。像这样：

setup() {
    const dragFrom = ref(null);
    const dragTo = ref(null);
    onMounted(() => {
      dragula([dragFrom,dragTo],{
        copy: (el) => {
          console.log(el);
          return true;
        },accepts: () => {
          return true;
        },});
    });
    return { dragFrom,dragTo };
}

但这种方式可以成功：

mounted() {
    const dragFrom = this.$refs.dragFrom;
    const dragTo = this.$refs.dragTo;
    dragula([dragFrom,{
      copy: function (el,source) {
        console.log(el);
        return true;
      },accepts: function (el,target) {
        return true;
      },});
}

这两种方法都是基于vue3的。有什么问题？

解决方法

您的问题是因为您在将它们传递给 dragFrom.value 函数时不是 accessing the value of the ref，即 dragTo.value 和 dragula()。请记住，当您创建反应式和可变 ref 对象时，您需要使用 .value 属性访问其内部值。

因此这应该有效：

setup() {
    const dragFrom = ref(null);
    const dragTo = ref(null);
    onMounted(() => {

      // Ensure you access the VALUE of the ref!
      dragula([dragFrom.value,dragTo.value],{
        copy: (el) => {
          console.log(el);
          return true;
        },accepts: () => {
          return true;
        },});
    });
    return { dragFrom,dragTo };
}

在我创建的这个演示 CodeSandbox 上查看概念验证：https://uwgri.csb.app/

dragula vue.js