cari

Rumah  >  Soal Jawab  >  teks badan

Gunakan vue-select atau kotak pilihan lain yang bagus bersama-sama dengan Vue 3's ESM vuild

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?

P粉637866931P粉637866931265 hari yang lalu482

membalas semua(2)saya akan balas

  • P粉986937457

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

    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.

    balas
    0
  • P粉158473780

    P粉1584737802024-03-31 00:32:02

    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: 

    <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" />

    Kemudian import vue seperti ini: 

    const { createApp } = Vue;

    Kemudian import komponen vue-select dengan cara ini: 

    const app = createApp({
  components: {
    vSelect: window["vue-select"],
  },
  ...

    Coretan kod berfungsi: 

    <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>

    balas
    0
  • Batalbalas