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

Question

当我在 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, dragTo], {
      copy: function (el, source) {
        console.log(el);
        return true;
      },
      accepts: function (el, target) {
        return true;
      },
    });
}

Both methods are based on vue3.What's wrong?

Answer 1

您的问题是因为您不是 accessing the value of the ref，即在将 dragFrom.value 和 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/

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

Why can't I use dragula in Vue3 setup but mounted?

vue.js

dragula