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

【问题标题】：Why can't I use dragula in Vue3 setup but mounted?为什么我不能在 Vue3 设置中使用 Dragula 但已安装？
【发布时间】：2021-06-27 05:55:33
【问题描述】：

当我在 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;
      },
    });
}

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

【问题讨论】：

在尝试使用元素引用实例化 dragula 之前，您可能应该等待 nextTick，因为在调用 onmounted 钩子时不能保证它们是非空的。
我试过你说的。它似乎不起作用
stackoverflow.com/a/65087529/5962802

标签： vue.js dragula

【解决方案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/

【讨论】：