[Vuejs]-Mitt event bus with combobox usage in VueJS 3

0👍

Thanks to @bassxzero suggestions the solution:

child

<template>
  <div class="combobox">
    <label for="{{selector_name}}">
      <p>{{ selector_title }}</p>
    </label>
    <select
      :name="selector_name"
      :id="selector_id"
      :disabled="disabled"
      @change="lockCombo"
      v-if="!option"
    >
      <option selected value disabled>--select--</option>
      <option v-for="(opt, index) in selector_options" :key="`opt ${index}`">
        {{ opt }}
      </option>
    </select>
    <select :name="selector_name" :id="selector_id" disabled="true" v-else>
      <option selected value disabled>{{ option }}</option>
    </select>
  </div>
</template>

<script>
import { store } from "../js/store.js";

export default {
  name: "ComboBox",
  data() {
    return {
      disabled: false,
    };
  },
  props: {
    selector_title: {
      type: String,
      required: true,
    },
    selector_name: {
      type: String,
      required: true,
    },
    selector_id: {
      type: String,
      default: "combobox",
    },
    selector_options: {
      type: Array,
      required: true,
    },
    option: {
      type: String,
      //required: true
    },
  },
  methods: {
    lockCombo(event) {
      this.emitter.emit("lock-combobox", {
        id: this.selector_id,
        value: event.target.value,
      });
      const log = {
        time_stamp: new Date().toISOString(),
        message: "ComboBox Choice [" + event.target.value + "] Was selected!",
        color: "orange",
        name: store.logs.length,
      };
      store.logs.push(log);
    },
  },
};
</script>

Parent

created() {
        this.emitter.on('lock-combobox', (event) => {
            if (event.id === "combo1") {
                this.$refs.combo1.disabled = true;
                store.pattern = event.value;
            }
            else if (event.id === "combo2") {
                this.$refs.combo2.disabled = true;
                store.arm = event.value;
            }
        });
        this.emitter.off('lock-combobox', (event) => {
            if (event.id === "combo1") {
                this.$refs.combo1.disabled = true;
                store.pattern = event.value;
            }
            else if (event.id === "combo2") {
                this.$refs.combo2.disabled = true;
                store.arm = event.value;
            }
        });
}

Leave a comment