Kotak lungsur turun Vue secara tidak segerak meminta untuk menghantar nilai

Vue ialah rangka kerja bahagian hadapan Kelebihan menggunakannya ialah anda boleh membina aplikasi satu halaman yang kompleks dengan mudah. Dalam Vue, kotak lungsur ialah salah satu daripada komponen borang yang biasa digunakan Dalam sesetengah senario yang memerlukan pemuatan dinamik pilihan, adalah perlu untuk meminta data secara tidak segerak dan menghantarnya ke kotak lungsur untuk mencapai integriti berfungsi. Artikel ini akan memperkenalkan penggunaan rangka kerja Vue untuk melaksanakan kaedah pemindahan nilai selepas kotak lungsur turun meminta data secara tidak segerak.

1. Senario permintaan

Dalam aplikasi sebenar, pilihan dalam kotak lungsur dimuatkan secara dinamik dan permintaan tak segerak perlu dibuat kepada pelayan untuk mendapatkan data. Contohnya, dalam tapak web e-dagang, semua kategori produk perlu dipaparkan dalam kotak lungsur dan kategori produk berubah secara dinamik. Untuk mengelakkan penghantaran berulang jumlah data yang besar, perlu menggunakan permintaan tak segerak untuk mendapatkan kategori produk dan menghantar nilainya ke kotak lungsur.

2. Pengikatan data

Pengikatan data dalam Vue dilaksanakan melalui arahan model v. v-model boleh melaksanakan pengikatan data dua hala, supaya input pengguna dan data halaman dikemas kini secara serentak. Oleh itu, anda perlu terlebih dahulu menentukan objek data dalam contoh Vue dan mengikatnya pada arahan model v kotak lungsur untuk mencapai penghantaran pilihan.

Sebagai contoh, dalam kod berikut, kami mencipta objek data bernama "kategori" dan mengikatnya pada arahan model v kotak lungsur turun Nilai yang dipilih akan dikemas kini dalam masa nyata kepada ". kategori" dan sebaliknya.

<template>
  <select v-model="categories">
    <option v-for="category in categoriesList" :value="category.id">{{ category.name }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      categories: null, // 定义categories数据对象
      categoriesList: [] // 定义categoriesList数据对象，存放异步请求获取的选项数据
    };
  }
};
</script>

3. Data permintaan tak segerak

Seterusnya, kita perlu memulakan permintaan tak segerak untuk mendapatkan data pilihan kotak lungsur. Secara umumnya, permintaan tak segerak perlu dilaksanakan dalam fungsi kitaran hayat Vue, biasanya dalam fungsi "dicipta" atau "dilekapkan". Di sini kami menggunakan perpustakaan axios untuk memulakan permintaan rangkaian.

Sebagai contoh, dalam kod di bawah, kami memulakan permintaan tak segerak dalam fungsi "dilekapkan" untuk mendapatkan semua kategori produk dan menyimpannya dalam tatasusunan "categoriesList". Data dalam tatasusunan ini akan menyediakan data untuk pilihan dalam kotak lungsur.

<template>
  <select v-model="categories">
    <option v-for="category in categoriesList" :value="category.id">{{ category.name }}</option>
  </select>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      categories: null,
      categoriesList: []
    };
  },
  mounted() {
    axios
      .get("http://example.com/categories") // 发起异步请求
      .then(response => {
        this.categoriesList = response.data; // 获取到数据后将其赋值给categoriesList
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

4. Kod lengkap

Setakat ini, kami telah melaksanakan fungsi pemindahan nilai permintaan tak segerak bagi kotak lungsur. Di bawah ialah kod lengkap, yang boleh anda salin ke dalam projek anda untuk ujian.

<template>
  <select v-model="categories">
    <option v-for="category in categoriesList" :value="category.id">{{ category.name }}</option>
  </select>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      categories: null,
      categoriesList: []
    };
  },
  mounted() {
    axios
      .get("http://example.com/categories")
      .then(response => {
        this.categoriesList = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

5. Ringkasan

Contoh di atas memberitahu kita bahawa dalam Vue, pengikatan data komponen kotak drop-down dicapai dengan mentakrifkan objek data dan menggunakan arahan model-v. Untuk memuatkan pilihan secara dinamik, kami menggunakan fungsi "dilekapkan" untuk membuat permintaan tak segerak, mendapatkan data dan menyimpannya dalam tatasusunan, dan akhirnya menjadikan data dalam tatasusunan ke dalam kotak lungsur.

Dalam aplikasi praktikal, kami boleh mengembangkan kaedah di atas mengikut keperluan, contohnya, kami boleh menambah gesaan teks, fungsi carian, dll. untuk mencapai fungsi kotak lungsur turun yang lebih fleksibel.

Atas ialah kandungan terperinci Kotak lungsur turun Vue secara tidak segerak meminta untuk menghantar nilai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!