76 lines
1.5 KiB
Vue
76 lines
1.5 KiB
Vue
<template>
|
|
<select :value="value">
|
|
<option
|
|
value=""
|
|
disabled
|
|
selected
|
|
>
|
|
Bitte wählen
|
|
</option>
|
|
<slot />
|
|
</select>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "MaterializeSelect",
|
|
props: {
|
|
value: {
|
|
type: [Number, String],
|
|
default: "",
|
|
},
|
|
},
|
|
|
|
/**
|
|
* @description Component local variables
|
|
* @return {Object} data
|
|
* @return {undefined|FormSelect} data.instance
|
|
*/
|
|
data() {
|
|
return {
|
|
instance: undefined,
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
value() {
|
|
this.instance.destroy();
|
|
|
|
this.$nextTick(() => (this.instance = this.initializeSelect()));
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.instance = this.initializeSelect();
|
|
|
|
this.$el.addEventListener("change", this.changeHandler);
|
|
},
|
|
|
|
destroyed() {
|
|
this.$el.removeEventListener("change", this.changeHandler);
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* @description Initialize a new Materialize select component
|
|
* @param {Object} options
|
|
* @return {FormSelect}
|
|
* @see https://materializecss.com/select.html#options
|
|
*/
|
|
initializeSelect(options = {}) {
|
|
return M.FormSelect.init(this.$el, options);
|
|
},
|
|
|
|
/**
|
|
* @description Send the proper input event to the parents components
|
|
* @param {Event} event
|
|
* @param {HTMLSelectElement} target
|
|
* @see https://developer.mozilla.org/fr/docs/Web/API/Event/target
|
|
*/
|
|
changeHandler({ target }) {
|
|
this.$emit("input", target.value);
|
|
},
|
|
},
|
|
};
|
|
</script>
|