I am currently delving into the world of VueJS 3 paired with typescript language. My goal is to develop a select2 component, but I encountered an error which was highlighted in the console.log message:
https://i.sstatic.net/PpUhg.png
Below is the snippet of code from my AppSelect2.vue file:
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { Options } from '../../interfaces';
import 'select2'
import $ from "jquery";
const emit = defineEmits<{
(e: 'update:modelValue', value: string | number): void
}>()
interface Props {
id?: string,
label?: string,
modelValue: string | number,
options: Array<Options>,
}
const {
id,
label = '',
modelValue,
options,
} = defineProps<Props>()
function updateValue(e: Event): void {
emit("update:modelValue", (e.target as HTMLSelectElement).value)
}
const select = ref(null)
function attach(): void {
$(select).select2()
}
onMounted(function () {
setTimeout(() => {
attach()
}, 100)
})
</script>
<template>
<label v-if="label" :for="id" class="form-label">{{ label }}</label>
<select ref="select" :id="id" class="form-select" v-model="modelValue" @change="updateValue">
<option v-for="option in options" :value="option.key">{{ option.value }}</option>
</select>
</template>Additionally, I have installed these necessary packages :
https://i.sstatic.net/QLUMA.png
If anyone could offer some assistance, it would be greatly appreciated!