In my current setup, I have a client-side javascript app using Vue 3 with the following structure:
HTML (including a 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 am looking to enhance the select box by incorporating a more modern and feature-rich alternative like vue-select or select2. However, I'm unsure of how to integrate these components without introducing compatibility issues between jQuery and Vue.js. Therefore, I want to avoid directly implementing select2 as a jquery plugin.
Any suggestions on transforming the select box into a sleeker and contemporary select element are much appreciated!