在 Vuejs 中调用数据内部的方法

Question

我试图在 vue.js 中与 Paho 建立 MQTT 连接，但我的选项对象有一些问题。

Vue.component('componente', {
    template: `<div></div>`,
    data: () => ({
        mqtt: null,
        options: {
            timeout: 3,
            onSuccess: () => this.success(), //here is the problem
            onFailure: () => this.failure(),
        },
        host: "10.0.0.11",
        port: 8083,
        client: "WebClient",
        topic: "mqtt"
    }),
    methods: {
    success: () => {
        console.log("Conexion completa");
        this.mqtt.subscribe(this.topic);
    },
    failure: (msg) => {
        console.log("error");
        console.error(msg);
    },
    message(msg){
        console.log("Mensaje " + msg.payloadString);
    },
    connect(){
        console.log("conectando");
        this.mqtt = new Paho.MQTT.Client(this.host,this.port,this.client);
        this.mqtt.onMessageArrived = this.message;
        this.mqtt.connect(this.options);
    }
  },
  mounted () {
    this.connect();
  }
});

这什么都不做，永远不会调用success 方法。但如果我改变，.connect 就可以了。

this.mqtt.connect({onSuccess: () => {this.mqtt.subscribe(this.topic)}});

以前，我在数据上调用函数时遇到了很多问题，给了我诸如“成功不是函数”之类的错误。现在，这不会显示任何错误。

编辑：下一个代码工作，但订阅功能什么都不做

this.mqtt.connect({onSuccess: this.success});

Answer 1

只需将data 改为不使用箭头函数，即

data () {
  return {
    mqtt: null,
    options: {
      timeout: 3,
      onSuccess: () => this.success(),
      onFailure: () => this.failure(),
    },
    host: "10.0.0.11",
    port: 8083,
    client: "WebClient",
    topic: "mqtt"
  }
}

您的任何方法都不应该使用箭头函数。让它们都成为普通的对象方法。

methods: {
  success () {
    console.log("Conexion completa");
    this.mqtt.subscribe(this.topic);
  },
  // etc
}