diff options
author | Daniel Weipert <code@drogueronin.de> | 2023-11-07 23:47:37 +0100 |
---|---|---|
committer | Daniel Weipert <code@drogueronin.de> | 2023-11-07 23:47:37 +0100 |
commit | 7e4a2e3e3a45f0dd302ab3b0e3ac49ad7189eba4 (patch) | |
tree | c2a65bd1af9bb55de7680625557260566a1e6087 /app/src/components/Select.vue | |
parent | 30c8c2f2b05bab8b962b51c0faeb282980324a5c (diff) |
Diffstat (limited to 'app/src/components/Select.vue')
-rw-r--r-- | app/src/components/Select.vue | 86 |
1 files changed, 43 insertions, 43 deletions
diff --git a/app/src/components/Select.vue b/app/src/components/Select.vue index f2d1187..0f55cca 100644 --- a/app/src/components/Select.vue +++ b/app/src/components/Select.vue @@ -1,60 +1,60 @@ <template> - <select /> + <select ref="$el" /> </template> -<script> +<script setup> +import { onMounted, onUnmounted, ref, watch } from 'vue'; import 'select2/dist/js/select2.min'; import $ from 'jquery'; -export default { - props: { - options: { - type: Array, - required: true, - }, +const props = defineProps({ + modelValue: {}, - modelValue: { - type: [Number, String], - required: true, - }, + options: { + type: Array, + required: true, + }, - config: { - type: Object, - default: () => ({}), - }, + modelValue: { + type: [Number, String], + required: true, }, - emits: ['update:modelValue'], + config: { + type: Object, + default: () => ({}), + }, +}); +const emit = defineEmits(['update:modelValue']); - watch: { - options (value) { - $(this.$el) - .empty().select2({ data: value }); - }, +const $el = ref(null); - modelValue (value) { - $(this.$el) - .val(value) - .trigger('change'); - }, - }, +onMounted(() => { + $($el.value) + .select2({ ...props.config, data: props.options }) + .val(props.modelValue) + .trigger('change') + .on('change', (event) => { + emit('update:modelValue', event.target.value); + }); +}); - mounted () { - $(this.$el) - .select2({ ...this.config, data: this.options }) - .val(this.modelValue) - .trigger('change') - .on('change', (ev) => { - this.$emit('update:modelValue', ev.target.value); - }); - }, +onUnmounted(() => { + $($el.value) + .off() + .select2('destroy'); +}); - unmounted () { - $(this.$el) - .off() - .select2('destroy'); - }, -}; +watch(() => props.options, (value) => { + $($el.value) + .empty().select2({ data: value }); +}); + +watch(() => props.modelValue, (value) => { + $($el.value) + .val(value) + .trigger('change'); +}); </script> <style lang="scss"> |