Vue ドロップダウン ボックスは値を渡すように非同期的にリクエストします

Vue はフロントエンド フレームワークであり、これを使用する利点は、複雑な単一ページ アプリケーションを簡単に構築できることです。 Vue では、ドロップダウン ボックスは一般的に使用されるフォーム コンポーネントの 1 つであり、オプションの動的な読み込みが必要な一部のシナリオでは、機能の整合性を実現するために、データを非同期でリクエストしてドロップダウン ボックスに渡す必要があります。この記事では、Vue フレームワークを使用して、ドロップダウン ボックスがデータを非同期的に要求した後の値転送メソッドを実装する方法を紹介します。

1. 需要シナリオ

実際のアプリケーションでは、ドロップダウン ボックスのオプションが動的にロードされ、データを取得するにはサーバーに対して非同期リクエストを行う必要があります。たとえば、電子商取引 Web サイトでは、すべての製品カテゴリをドロップダウン ボックスに表示する必要があり、製品カテゴリは動的に変化します。大量のデータの繰り返し送信を避けるために、非同期リクエストを使用して製品カテゴリを取得し、その値をドロップダウン ボックスに渡す必要があります。

2. データ バインディング

Vue のデータ バインディングは、v-model ディレクティブを通じて実装されます。 v-model は双方向のデータ バインディングを実装できるため、ユーザー入力とページ データが同期して更新されます。したがって、オプションの配信を実現するには、最初に Vue インスタンスでデータ オブジェクトを定義し、それをドロップダウン ボックスの v-model ディレクティブにバインドする必要があります。

たとえば、次のコードでは、「categories」という名前のデータ オブジェクトを作成し、それをドロップダウン ボックスの v-model ディレクティブにバインドします。選択された値は、リアルタイムで「」に更新されます。カテゴリ」、またはその逆。

<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. 非同期リクエスト データ

次のステップでは、ドロップダウン ボックスのオプション データを取得するために非同期リクエストを開始する必要があります。一般に、非同期リクエストは Vue のライフサイクル関数、通常は「created」または「mounted」関数で実行する必要があります。ここでは、axios ライブラリを使用してネットワーク リクエストを開始します。

たとえば、次のコードでは、「mounted」関数で非同期リクエストを開始して、すべての製品カテゴリを取得し、それらを「categoriesList」配列に保存します。この配列内のデータは、ドロップダウン ボックスのオプションのデータを提供します。

<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. 完全なコード

これまでに、ドロップダウン ボックスの非同期リクエスト値の受け渡し機能を実装しました。以下は完全なコードです。テストのためにプロジェクトにコピーできます。

<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. 概要

上記の例は、Vue では、データ オブジェクトを定義し、v-model ディレクティブを使用することによってドロップダウン ボックス コンポーネントのデータ バインディングが実現されることを示しています。オプションを動的にロードするには、「mounted」関数を使用して非同期リクエストを作成し、データを取得して配列に保存し、最後に配列内のデータをドロップダウン ボックスにレンダリングします。

実際のアプリケーションでは、必要に応じて上記の方法を拡張できます。たとえば、テキスト プロンプトや検索機能などを追加して、より柔軟なドロップダウン ボックス機能を実現できます。

以上がVue ドロップダウン ボックスは値を渡すように非同期的にリクエストしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。