La liste déroulante Vue demande de manière asynchrone de transmettre une valeur

Vue est un framework front-end L'avantage de son utilisation est que vous pouvez facilement créer des applications complexes d'une seule page. Dans Vue, la liste déroulante est l'un des composants de formulaire couramment utilisés. Dans certains scénarios nécessitant un chargement dynamique d'options, il est nécessaire de demander des données de manière asynchrone et de les transmettre à la liste déroulante pour obtenir l'intégrité fonctionnelle. Cet article présentera l'utilisation du framework Vue pour implémenter la méthode de transfert de valeur après que la liste déroulante ait demandé des données de manière asynchrone.

1. Scénario de demande

Dans les applications réelles, les options de la liste déroulante sont chargées dynamiquement et une requête asynchrone doit être adressée au serveur pour obtenir des données. Par exemple, sur un site de commerce électronique, toutes les catégories de produits doivent être affichées dans une liste déroulante et les catégories de produits changent de manière dynamique. Afin d'éviter la transmission répétée de grandes quantités de données, il est nécessaire d'utiliser des requêtes asynchrones pour obtenir les catégories de produits et transmettre leurs valeurs dans la liste déroulante.

2. Liaison de données

La liaison de données dans Vue est implémentée via la directive v-model. v-model peut implémenter une liaison de données bidirectionnelle, de sorte que les entrées utilisateur et les données de page soient mises à jour de manière synchrone. Par conséquent, vous devez d'abord définir un objet de données dans l'instance Vue et le lier à la directive v-model de la liste déroulante pour obtenir la livraison des options.

Par exemple, dans le code ci-dessous, nous créons un objet de données nommé "categories" et le lions à la directive v-model de la liste déroulante. La valeur sélectionnée sera mise à jour dans "categories" en temps réel, vice-versa. versa.

<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. Données de requête asynchrone

Ensuite, nous devons lancer une requête asynchrone pour obtenir les données d'option de la liste déroulante. De manière générale, les requêtes asynchrones doivent être exécutées dans la fonction de cycle de vie de Vue, généralement dans la fonction « créée » ou « montée ». Ici, nous utilisons la bibliothèque axios pour lancer des requêtes réseau.

Par exemple, dans le code ci-dessous, nous lançons une requête asynchrone dans la fonction "montée" pour obtenir toutes les catégories de produits et les sauvegardons dans le tableau "categoriesList". Les données de ce tableau fourniront des données pour les options de la liste déroulante.

<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. Code complet

À ce stade, nous avons implémenté la fonction de transfert de valeur de requête asynchrone de la liste déroulante. Vous trouverez ci-dessous le code complet, que vous pouvez copier dans votre projet pour le tester.

<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. Résumé

L'exemple ci-dessus nous indique que dans Vue, la liaison des données du composant de liste déroulante est obtenue en définissant des objets de données et en utilisant la directive v-model. Pour charger dynamiquement les options, nous utilisons la fonction « montée » pour effectuer une requête asynchrone, obtenir les données et les enregistrer dans un tableau, et enfin restituer les données du tableau dans la liste déroulante.

Dans les applications pratiques, nous pouvons étendre la méthode ci-dessus selon les besoins, par exemple, nous pouvons ajouter des invites de texte, des fonctions de recherche, etc. pour obtenir une fonction de liste déroulante plus flexible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!