Call a methods from data()

Question

In my Vue App, I use a drag and drop system. (I use https://github.com/Vivify-Ideas/vue-draggable FYI).

In my data() I have to declare parametters like this:

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

You can see that I have a onDrop: function(event) {}. I would like to call a function I declared like that.

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

I tried to use this.callLayout() etc.. But still have the

callLayout is not a function/not defined.

Do you have an idea of what I'm doing wrong ? =(

Answer 1

您必须使用箭头功能或对onDrop功能使用绑定。这会导致错误，因为在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.
        }
      }
}