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;
}
});
}
Source:stackexchange.com