masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Gunakan vue-select atau kotak pilihan lain yang bagus bersama-sama dengan Vue 3's ESM vuild
P粉637866931
P粉637866931 2024-03-30 13:40:38
0
2
494

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粉637866931
P粉637866931

membalas semua(2)
P粉986937457
P粉9869374572024-03-31 09:43:16 Tingkat 2

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.

Suka +0
Tambah Balasan
P粉158473780
P粉1584737802024-03-31 00:32:02 Tingkat 1

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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan