我有以下簡單的設置，以及使用 Vue 3 的客戶端 JavaScript 應用程式：
HTML（有選擇框）：
<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>
我想使用具有搜尋等現代功能的「漂亮」選擇框（例如 vue-select 或 select2） - 但我不知道如何包含相關元件。我看到許多關於混合 jQuery 和 Vue.js 的警告，因此我避免只將 select2 作為 jquery 插件並以這種方式呈現。
如何將選擇框變成「更好」更現代的選擇元素？
P粉9869374572024-03-31 09:43:16
如果您不想使用插件而更喜歡自己建立它（我喜歡這樣做）。
為此，您可以建立一個包含輸入類型文字的 div，您可以使用該文字搜尋 div 內的選項。這些選項作為錨標記儲存在隱藏的 div 中。然後，將事件偵聽器附加到錨標記元素及其需要呼叫的函數。
看看這個，您當然可以編輯它並使其按照您需要的方式工作。
P粉1584737802024-03-31 00:32:02
這不是使用vue 3的esm構建，但仍然使用瀏覽器中直接支援的UMD構建（原因是vue-select庫不提供esm構建版本，但它仍然支援UMD構建）。
基本上以這種方式包含依賴項：
<script src="https://unpkg.com/vue@latest"></script> <script src="https://unpkg.com/vue-select@beta"></script> <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css" />
然後這樣導入vue：
const { createApp } = Vue;
然後以這種方式導入 vue-select 元件：
const app = createApp({
components: {
vSelect: window["vue-select"],
},
...
工作程式碼片段：
<html>
<head>
<title>Test</title>
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@beta"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-select@latest/dist/vue-select.css"
/>
</head>
<body>
<div id="vuetest">
<v-select :options="flattenedFtAssignemnts" label="text"></v-select>
</div>
<script type="module">
const { createApp } = Vue;
const app = createApp({
components: {
vSelect: window["vue-select"],
},
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" },
],
},
],
};
},
computed: {
flattenedFtAssignemnts() {
return this.ft_assignments.map(obj => obj.children).flat();
}
},
watch: {
ft_assignment(v) {
console.log(v);
},
},
});
app.mount("#vuetest");
</script>
</body>
</html>