SensorsBroker.vue

<template>
  <form class="Broker" @submit.prevent="callback">
    <label>MQTT Broker:</label>
    <input :value="url" :disabled="connecting" />
    <input type="submit" :value="statusText" :disabled="connecting" />
  </form>
</template>

<script>
export default {
  data: function() {
    return {
      url: this.defaultURL,
    };
  },
  props: {
    connecting: {
      type: Boolean,
      default: false
    },
    connected: {
      type: Boolean,
      default: false
    },
    defaultURL: {
      type: String,
      default: "ws://localhost:8080"
    },
    handler: Function
  },
  computed: {
    callback: function() {
      console.log("Broker : calling callback with url : ",this.url);
      console.log(this.handler);
      return () => this.handler(this.url);
    },
    statusText: function() {
      if (this.connected) {
        return "Disconnect";
      } else {
        if (this.connecting) {
          return "Connecting...";
        } else {
          return "Connect";
        }
      }
    }
  }
};
</script>

<style>
</style>