suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Verwenden Sie vue-select oder ein anderes nettes Auswahlfeld zusammen mit dem ESM-Vuild von Vue 3

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粉637866931P粉637866931233 Tage vor439

Antworte allen(2)Ich werde antworten

  • P粉986937457

    P粉9869374572024-03-31 09:43:16

    如果您不想使用插件而更喜欢自己构建它(我喜欢这样做)。

    为此,您可以创建一个包含输入类型文本的 div,您可以使用该文本搜索 div 内的选项。这些选项作为锚标记存储在隐藏的 div 中。然后,将事件侦听器附加到锚标记元素及其需要调用的函数。

    看看这个,您当然可以编辑它并使其按照您需要的方式工作。

    Antwort
    0
  • P粉158473780

    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>

    Antwort
    0
  • StornierenAntwort