如何从自定义 js 调用 function 到我的 Vue 组件方法

Question

I'm trying to copy a drag and drop task like trello link

Now, how can I call dragdrop.js 's function inside MyComponent.vue 's method?

Here's what I did...

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) {
}

I got this error when I start dragging:

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

Firstly: you don't actually need to put the dragdrop in your data object. Here's a better way:

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

Answer: My guess is that you should probably return the functions that you want to run. It's hard to tell what the actual problem is with the HTML drag attributes without the actual HTML code though.

Answer 2

Export the function you need to use in the Vue component.

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

export default dragStart;

Now you can import it in Vue like

import dragStart from "./dragdrop";

and can be used inside the component like

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