This repository was archived by the owner on Mar 21, 2023. It is now read-only.
This repository was archived by the owner on Mar 21, 2023. It is now read-only.
vue3-select2-component: select2 is not a function & Unhandled error during execution of mounted hook #68
Open
Description
Hello!
I am trying to implement the vue3 version of this component, and I have encountered this error:
This is how I've implemented it:
<template>
<Head title="Docs - Frontend"/>
<div class="be-content be-no-padding">
<Nav/>
<div class="main-content container-fluid">
<div class="bg-white" style="padding: 5rem;">
<div class="row">
<div class="col-12">
<Select2
id="select2"
name="select2"
v-model="multiSelectValue"
:options="multiSelectOptions"
:settings="{ placeholder: 'Select an option', multiple: true, }"
@change="myChangeEvent($event)" @select="mySelectEvent($event)"
/>
<p>The selected options are: {{ multiSelectValue }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import AuthenticatedLayoutWithSidebar from '@/Pages/Internal/AuthenticatedLayoutWithSidebar.vue';
import Select2 from 'vue3-select2-component';
export default {
layout: AuthenticatedLayoutWithSidebar,
name: "SelectDocs",
components: {
Select2,
},
data() {
return {
multiSelectValue: [],
multiSelectOptions: [
{id: 1, text: "Option 1"},
{id: 2, text: "Option 2"}
]
};
},
methods: {
myChangeEvent(val) {
console.log(val);
},
mySelectEvent({id, text}) {
console.log({id, text})
}
}
}
</script>The console also shows the error:
Select2.vue:99 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'select2')
I followed this post to get jQuery to work, but it looks like something didn't quite work.
Metadata
Metadata
Assignees
Labels
No labels