如何從自定義 js 調用 function 到我的 Vue 組件方法

Question

我正在嘗試復制像 trello 鏈接這樣的拖放任務

現在，如何在MyComponent.vue的方法中調用dragdrop.js的 function ？

這就是我所做的......

我的組件.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)

Answer 1

首先：您實際上不需要將拖放操作放入數據 object 中。 這是一個更好的方法：

  <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組件中需要使用的function。

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

export default dragStart;

現在你可以像這樣在Vue中導入它

import dragStart from "./dragdrop";

並且可以在組件內部使用，例如

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