Question

我正在尝试复制拖放任务，例如trello documentation

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

这是我做的...

MyComponent.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>

dragdrop.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)

Answer 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拖动属性的实际问题是什么。

Answer 2

导出您需要在Vue组件中使用的功能。

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

export default dragStart;

现在您可以像这样在Vue中将其导入

import dragStart from "./dragdrop";

并且可以在组件内部使用，例如

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

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

2 个答案: