Saya mempunyai persediaan mudah berikut dan aplikasi JavaScript sisi pelanggan menggunakan Vue 3:
HTML (dengan kotak pilihan):
<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>
Saya ingin menggunakan kotak pilihan "nice" (seperti vue-select atau select2) dengan fungsi moden seperti carian - tetapi saya tidak tahu cara memasukkan komponen yang berkaitan. Saya melihat banyak amaran tentang mencampurkan jQuery dan Vue.js, jadi saya elakkan hanya menggunakan select2 sebagai pemalam jquery dan menjadikannya seperti itu.
Bagaimana untuk menukar kotak pilihan menjadi elemen pemilihan yang "lebih baik" yang lebih moden?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika anda tidak mahu menggunakan pemalam dan lebih suka membinanya sendiri (yang saya suka lakukan).
Untuk melakukan ini, anda boleh mencipta div yang mengandungi teks jenis input, yang boleh anda gunakan untuk mencari pilihan dalam div. Pilihan ini disimpan dalam div tersembunyi sebagai tag anchor. Kemudian, lampirkan pendengar acara pada elemen tag anchor dan fungsi yang perlu dipanggil.
Sila lihat ini, anda sudah tentu boleh mengeditnya dan menjadikannya berfungsi seperti yang anda perlukan.
Ini bukan binaan esm menggunakan vue 3, tetapi masih menggunakan binaan UMD yang disokong secara langsung dalam penyemak imbas (sebabnya ialah perpustakaan vue-select tidak menyediakan versi binaan esm, tetapi ia masih menyokong binaan UMD).
Pada asasnya masukkan kebergantungan dengan cara ini:
Kemudian import
vueseperti ini:const { createApp } = Vue;Kemudian import komponen
vue-selectdengan cara ini:const app = createApp({ components: { vSelect: window["vue-select"], }, ...Coretan kod berfungsi: