Heim > Fragen und Antworten > Hauptteil
Ich habe das folgende einfache Setup und eine clientseitige JavaScript-Anwendung mit Vue 3:
HTML (mit Auswahlfeld):
<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>
Ich möchte ein „schönes“ Auswahlfeld (wie vue-select oder select2) mit modernen Funktionen wie der Suche verwenden – aber ich weiß nicht, wie ich die relevanten Komponenten einbinden soll. Ich sehe viele Warnungen vor dem Mischen von jQuery und Vue.js, daher vermeide ich es, select2 einfach als JQuery-Plugin zu verwenden und es auf diese Weise zu rendern.
Wie verwandelt man das Auswahlfeld in ein „besseres“, moderneres Auswahlelement?
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>