Vue drop-down box asynchronously requests to pass value

Vue is a front-end framework. The advantage of using it is that you can easily build complex single-page applications. In Vue, the drop-down box is one of the commonly used form components. In some scenarios where dynamic loading of options is required, data needs to be requested asynchronously and passed to the drop-down box to achieve functional integrity. This article will introduce the use of the Vue framework to implement the value transfer method after the drop-down box asynchronously requests data.

1. Demand scenario

In actual applications, the options in the drop-down box are dynamically loaded, and an asynchronous request needs to be made to the server to obtain data. For example, in an e-commerce website, all product categories need to be displayed in a drop-down box, and the product categories change dynamically. In order to avoid repeated transmission of large amounts of data, it is necessary to use asynchronous requests to obtain product categories and pass their values ​​to the drop-down box.

2. Data binding

Data binding in Vue is implemented through the v-model directive. v-model can implement two-way data binding, so that user input and page data are updated synchronously. Therefore, you first need to define a data object in the Vue instance and bind it to the v-model directive of the drop-down box to achieve the delivery of options.

For example, in the following code, we create a data object named "categories" and bind it to the v-model directive of the drop-down box. The selected value will be updated in real time to "categories" and vice 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. Asynchronous request data

Next step, we need to initiate an asynchronous request to obtain the option data of the drop-down box. Generally speaking, asynchronous requests need to be executed in Vue's life cycle function, usually in the "created" or "mounted" function. Here we use the axios library to initiate network requests.

For example, in the following code, we initiate an asynchronous request in the "mounted" function to obtain all product categories and save them in the "categoriesList" array. The data in this array will provide data for the options in the drop-down box.

<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. Complete code

So far, we have implemented the asynchronous request value passing function of the drop-down box. Below is the complete code, which you can copy into your project for testing.

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

The above example tells us that in Vue, data binding of the drop-down box component is achieved by defining data objects and using the v-model directive. To dynamically load options, we use the "mounted" function to make an asynchronous request, get the data and save it in an array, and finally render the data in the array into the dropdown box.

In practical applications, we can expand the above method as needed, for example, we can add text prompts, search functions, etc. to achieve a more flexible drop-down box function.

The above is the detailed content of Vue drop-down box asynchronously requests to pass value. For more information, please follow other related articles on the PHP Chinese website!