如何从自定义 js 调用函数到我的 Vue 组件方法答案

【问题标题】：How can I call a function from a custom js to my Vue component method如何从自定义 js 调用函数到我的 Vue 组件方法
【发布时间】：2020-07-20 18:34:12
【问题描述】：

我正在尝试复制一个拖放任务，例如 trello link

现在，我如何在MyComponent.vue 的方法中调用dragdrop.js 的函数？

这就是我所做的......

我的组件.vue

  <template> 
    ....simple html drag and drop structure goes here
  </template>

  <script>
   import dragdrop from './dragdrop.js';
   export default {
       name: 'my-component',
       components: {},
       data: () => ({
          dragdrop : dragdrop
       }),
       methods: {
       dragStart(e) {
           this.dragdrop.dragStart(e);
       },
       dropIt(e) {
           this.dragdrop.dropIt(e);
       },
       allowDrop(e) {
           this.dragdrop.allowDrop(e);
       }
   }
  }
  </script>

拖放.js

function dragStart(ev) {
    ....
}
function dropIt(ev) {
    ....
}
function allowDrop(ev) {
}

开始拖动时出现此错误：

VM12491 tickets:36 Uncaught ReferenceError: dragStart is not defined
    at HTMLDivElement.ondragstart (VM12491 tickets:36)

VM12492 tickets:36 Uncaught ReferenceError: allowDrop is not defined
    at HTMLDivElement.ondragover (VM12491 tickets:36)

【问题讨论】：

标签： javascript html vue.js vue-component

【解决方案1】：

首先：您实际上不需要将拖放操作放在数据对象中。这是一个更好的方法：

  <script>
   import { dropStart, dropIt, allowDrop } from './dragdrop.js'; // ES6 object destructuring

   export default {
       name: 'my-component',
       methods: {
         dragStart(e) {
             return dragStart(e);
         },
         dropIt(e) {
             return dropIt(e);
         },
         allowDrop(e) {
             return allowDrop(e);
         }
     }
  }
  </script>

答案：我的猜测是您可能应该返回您想要运行的函数。但是，如果没有实际的 HTML 代码，很难判断 HTML 拖动属性的实际问题是什么。

【讨论】：

这个方法和我的差不多。这仍然不起作用
您是在导出 dropdown.js 中的函数吗？ export default { dropStart, dropIt, allowDrop }
是的。 “ export 'dropIt' (imported as '_dropIt') was not found in './dragdropswap'”，其他函数也一样
我的错。这行得通，我的也是。问题出在 html 道具中。谢谢你

【解决方案2】：

导出Vue组件中需要使用的函数。

const dragStart = function (ev) {
    console.log(ev);
};

export default dragStart;

现在你可以在Vue 中导入类似

import dragStart from "./dragdrop";

并且可以像在组件内部使用

created() {
  dragStart('test');
}

【讨论】：