I have the following simple setup, and a client-side JavaScript application using Vue 3:
HTML (with select box):
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="vuetest">
<select id="assignment-select" v-model="ft_assignment">
<optgroup v-for="optgroup in ft_assignments" :label="optgroup.text">
<option
v-for="option in optgroup.children"
:value="option.id"
:disabled="option.disabled"
>
{{ option.text }}
</option>
</optgroup>
</select>
</div>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
const app = createApp({
data() {
return {
ft_assignment: "a",
ft_assignments: [
{
text: "hi",
children: [
{ id: "a", text: "a1" },
{ id: "b", text: "b1" },
],
},
{
text: "there",
children: [
{ id: "c", text: "c1" },
{ id: "d", text: "d1" },
],
},
],
};
},
watch: {
ft_assignment(v) {
console.log(v);
},
},
}).mount("#vuetest");
</script>
</body>
</html>
I want to use a "nice" select box (e.g. vue-select or select2) with modern functionality like search - but I don't know how to include related components. I see a lot of warnings about mixing jQuery and Vue.js, so I avoid just using select2 as a jquery plugin and rendering it that way.
How to turn the selection box into a "better" more modern selection element?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you don't want to use a plugin and prefer to build it yourself (which I like to do).
To do this, you can create a div containing input type text that you can use to search for options within the div. These options are stored in a hidden div as anchor tags. Then, attach an event listener to the anchor tag element and the function it needs to call.
Take a look at this, you can of course edit it and make it work the way you need.
This is not an esm build using vue 3, but still using UMD builds which are directly supported in the browser (the reason is that the vue-select library does not provide an esm build version, but it still supports UMD builds).
Basically include dependencies this way:
Then import
vuelike this:const { createApp } = Vue;Then import the
vue-selectcomponent this way:const app = createApp({ components: { vSelect: window["vue-select"], }, ...Working code snippet: