Select2 In VueJS 3 (TypeScript)

Question

I'm currently learning VueJS 3 with typescript language, and I want to create a select2 component, but I got the error that console.log says:

Here is my code in the 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>

and I've installed these packages:

Any helps please?

I did sir. check my AppSelect2.vue code I'm importing jquery as $ — Rifki Ardiansyah
– Rifki Ardiansyah, Commented Mar 21, 2022 at 11:14
You import jquery, not select2. jquery itself doesn't have select2 method. — Estus Flask
– Estus Flask, Commented Mar 21, 2022 at 13:17

cking888 · Accepted Answer · 2022-03-23 08:43:44Z

1

Have you tried importing the function directly?

import select2 from 'select2';

And then calling it:

$('select').select2()

Instead you could try:
https://www.npmjs.com/package/vue-select2

Which is the same thing, but specifically for vueJS.

There's someone with the same issue here:
https://forums.select2.org/t/select2-in-vue-js/623

edited Mar 23, 2022 at 8:43

answered Mar 22, 2022 at 9:49

cking888

1736 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rifki Ardiansyah Over a year ago

I did, but still got same error

cking888 Over a year ago

Offered an alternative in my answer, sorry i can't be of more help :(

Rifki Ardiansyah Over a year ago

it's okay and thank you. I'm still trying how It can be done with typescript, I've created select2 in Vue js 2 before, but now, still getting errors with typescript Vue js 3

S M Khalilullah Over a year ago

You also need to import $ otherwise it will not be recognized. Another thing, you suggested a package that was last updated 6 years ago.

Collectives™ on Stack Overflow

Select2 In VueJS 3 (TypeScript)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related