BrainBlast/src/components/MQTTDebugPublish.vue

<template>
  <div>
    <h1>Publier sur MQTT</h1>
    <select v-model="selectedTopic">
      <option v-for="topic in topics" :key="topic">{{ topic }}</option>
    </select>
    <input type="text" v-model="message" placeholder="Saisissez votre message">
    <button @click="publishMessage">Publier sur MQTT</button>
  </div>
</template>

<script>
import {publishMessage} from '@/services/mqttService';

export default {
  data() {
    return {
      message: '', // Initialiser la variable message
      selectedTopic: 'topic1',
      topics: ['topic1', 'topic2', 'topic3', 'topic4', 'topic5', 'topic6', 'topic7', 'topic8', 'topic9', 'topic10'], // Liste des topics
    };
  },
  methods: {
    publishMessage() {
      publishMessage(this.selectedTopic, this.message);
    }
  }
}
</script>