从 data() Vue.js 中定义的对象调用函数

Question

I have an object (requestParams) in data :

data () {
  return {
    requestParams:{
      controller : '',
      data : {
        username : "arman",
        password : "1234"
      },
      callBack: function() {
        this.testFunct()
      }
    }
  }
},

And in methods:{} I have :

methods: {
  clickedButton()
  {
    this.$store.dispatch('postRequest', {self:this})
  },
  testFunct: function()
  {
    alert(123)
  }
},

The "clickedButton" function, calls a method from actions.js and then the actions.js calls the callBack function from requestParams like this :

self.requestParams.callBack();

The requestParams.callBack() trigger successfully but this.testFunct() returns this error :

Uncaught (in promise) TypeError: this.testFunct is not a function

How can i call "testFunct" in an object in data() ? Thanks.

Answer 1

Correct answer to your question depends a little bit on version of ES you are using. If you are using ES6 (or higher), then you can use Arrow function like this:

data () {
  return {
    requestParams:{
      controller : '',
      data : {
        username : "arman",
        password : "1234"
      },
      callBack: () => { // arrow function does not redeclare `this`
        this.testFunct()
      }
    }
  }
},

If you are using ES5, then you should assign this to any local variable inside your data method:

data () {
  var that = this;
  return {
    requestParams:{
      controller : '',
      data : {
        username : "arman",
        password : "1234"
      },
      callBack: function() {
        that.testFunct() // using `that`, not `this`
      }
    }
  }
},

And of course you can use second variant with ES6.