javascript - 从 data() 调用方法

Question

在我的 Vue 应用程序中，我使用拖放系统。 (我使用https://github.com/Vivify-Ideas/vue-draggable仅供引用)。

在我的 data() 中，我必须声明如下参数:

    data() {
      draggable: {
        dropzoneSelector: 'ul',
        draggableSelector: 'li',
        /* some extra parameters who are no incidence with my problem */
        onDrop: function(event) {
          callLayout(); 
        }
      }
}

您可以看到我有一个 onDrop: function(event) {}。我想调用我这样声明的函数。

  methods: {
    callLayout : function() {
        console.log('TOTO')
    }
  }

我尝试使用 this.callLayout() 等。但仍然收到此错误:

callLayout is not a function/not defined.

你知道我做错了什么吗？ =(

Answer 1

您必须使用箭头函数或使用 onDrop 函数的绑定(bind)。这会产生错误，因为在 onDrop 函数中此关键字不引用您的组件。

    data() {
      draggable: {
        dropzoneSelector: 'ul',
        draggableSelector: 'li',
        /* some extra parameters who are no incidence with my problem */
        onDrop: (event)=> { // Chnage to arrow function
          this.callLayout(); // Use this here.
        }
      }
}