J'ai la configuration simple suivante et une application JavaScript côté client utilisant Vue 3 :
HTML (avec case de sélection) :
<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>
Je souhaite utiliser une "jolie" boîte de sélection (comme vue-select ou select2) avec des fonctionnalités modernes comme la recherche - mais je ne sais pas comment inclure les composants pertinents. Je vois beaucoup d'avertissements concernant le mélange de jQuery et Vue.js, j'évite donc simplement d'utiliser select2 comme plugin jquery et de le rendre de cette façon.
Comment transformer la zone de sélection en un « meilleur » élément de sélection plus moderne ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous ne souhaitez pas utiliser de plugin et préférez le construire vous-même (ce que j'aime faire).
Pour ce faire, vous pouvez créer un div contenant du texte de type d'entrée, que vous pouvez utiliser pour rechercher des options dans le div. Ces options sont stockées dans un div caché sous forme de balises d'ancrage. Ensuite, attachez un écouteur d'événement à l'élément de balise d'ancrage et à la fonction qu'il doit appeler.
Jetez un œil à ceci, vous pouvez bien sûr le modifier et le faire fonctionner comme vous le souhaitez.
Il ne s'agit pas d'une version esm utilisant vue 3, mais utilisant toujours des versions UMD qui sont directement prises en charge dans le navigateur (la raison est que la bibliothèque vue-select ne fournit pas de version de version esm, mais elle prend toujours en charge les versions UMD).
Incluez essentiellement les dépendances de cette façon :
Puis importez
vuecomme ceci :const { createApp } = Vue;Puis importez le composant
vue-selectde cette façon :const app = createApp({ components: { vSelect: window["vue-select"], }, ...Extrait de code de travail :