使用 Rest Api 如何在 Vuejs 的下拉列表中加载数据？

Question

new Vue({
    el: '#app',
    
    data: function() {
        return {
            countries: [],
            cities: [],
            selectedContinent: "",
            selectedCountry: "",
            selectedCity: ""
        }
    },
    watch: {
        selectedContinent: function() {
            // Clear previously selected values
            this.countries = [];
            this.cities = [];
            this.selectedCountry = "";
            this.selectedCity = "";
            // Populate list of countries in the second dropdown
            if (this.selectedContinent.length > 0) {
                this.countries = this.places[this.selectedContinent]
            }
        },
        selectedCountry: function() {
            // Clear previously selected values
            this.cities = [];
            this.selectedCity = "";
            // Now we have a continent and country. Populate list of cities in the third dropdown
            if (this.selectedCountry.length > 0) {
                this.cities = this.places[this.selectedContinent][this.selectedCountry]
            }
        }
    }
})

.dropdown {
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #DDD;
}

.dropdown span {
    display:inline-block;
    width: 80px;
}

<body>
    <div id="app">
       <div class="cascading-dropdown">
            <div class="dropdown">
                <span>Continent:</span>
                <select v-model="selectedContinent">
                    <option value="">Select a Continent</option>
                    <option v-for="(country_obj, country) in places" :value="country">{{country}}</option>
                </select>
            </div>
            <div class="dropdown">
                <span>Country:</span>
                <select :disabled="countries.length == 0" v-model="selectedCountry">
                    <option value="">Select a Country</option>
                    <option v-for="(city_obj, city) in countries">{{city}}</option>
                </select>
            </div>
            <div class="dropdown"> 
                <span>City:</span>
                <select :disabled="cities.length == 0" v-model="selectedCity">
                    <option value="">Select a City</option>
                    <option v-for="city in cities">{{city}}</option>
                </select>
            </div>
        </div>
    </div> 
</body>

以下是国家、州和城市的 REST API https://www.universal-tutorial.com/rest-apis/free-rest-api-for-country-state-city 我已经生成了一个令牌。生成的令牌：IIPwMXygilaKrQJfNLuj-LHZWn5kxBVZRLJ-KtU5jxRivdTBkHio6IOyF60CERyOPjo

工作代码和框link:- https://jsfiddle.net/Dhanunjay/sj24kn0b/6/

通过数据中的项目列表，我可以在下拉列表中加载数据。但是我不确定如何在下拉列表

中使用rest api加载数据

遵循此文档以获得国家、州和城市的免费 REST API

Answer 1

第 1 步： 创建HTML 您的模板

<template>
  <div class="cascading-dropdown">
    <div class="dropdown">
      <H2>Build a reusable dropdown vue component</H2>
      <span>Country:</span>
      <select v-model="selectedCountry" @change="onChangeCountry">
        <option value="">Select a Country</option>
        <option
          v-for="(country, index) in listCountry"
          :value="country.country_name"
          :key="index"
        >
          {{ country.country_name }}
        </option>
      </select>
    </div>
    <div class="dropdown">
      <span>State:</span>
      <select
        :disabled="listState.length == 0"
        v-model="selectedState"
        @change="onChangeState"
      >
        <option value="">Select a State</option>
        <option
          v-for="(state, index) in listState"
          :key="index"
          :value="state.state_name"
        >
          {{ state.state_name }}
        </option>
      </select>
    </div>
    <div class="dropdown">
      <span>State:</span>
      <select :disabled="listCities.length == 0" v-model="selectedCity">
        <option value="">Select a City</option>
        <option
          v-for="(city, index) in listCities"
          :key="index"
          :value="city.city_name"
        >
          {{ city.city_name }}
        </option>
      </select>
    </div>
    <p v-if="selectedCountry">Selected Country - {{ this.selectedCountry }}</p>
    <p v-if="selectedState">Selected State - {{ this.selectedState }}</p>
    <p v-if="selectedCity">Selected City - {{ this.selectedCity }}</p>
  </div>
</template>

步骤 2： 创建 model 数据

data() {
  return {
    listCountry: [],
    listState: [],
    listCities: [],
    selectedCountry: "",
    selectedState: "",
    selectedCity: "",
    authToken: "",
  };
},

第 3 步： 获得国家、州和城市的免费 REST API。我们需要从 api-token

生成 auth_token

generateAccessToken() {
  axios
    .get("https://www.universal-tutorial.com/api/getaccesstoken", {
      headers: {
        Accept: "application/json",
        "api-token":
          "jAJuES2nNREYu0qOJ9Sy6bydr_LPxmjv0jUAR-oEuXozRP_CjqPqRgp1mCPaNh8VPZo",
        "user-email": "itjebasuthan@gmail.com",
      },
    })
    .then((res) => {
      this.authToken = res.data.auth_token;
      this.loadCountry();
    });
},

第 4 步： 为国家、州和城市创建 onChange 事件

loadCountry() {
  axios
    .get("https://www.universal-tutorial.com/api/countries", {
      headers: {
        Authorization: `Bearer ${this.authToken}`,
        Accept: "application/json",
      },
    })
    .then((res) => {
      this.listCountry = res.data;
    });
},
onChangeCountry() {
  axios
    .get(
      `https://www.universal-tutorial.com/api/states/${this.selectedCountry}`,
      {
        headers: {
          Authorization: `Bearer ${this.authToken}`,
          Accept: "application/json",
        },
      }
    )
    .then((res) => {
      this.listState = res.data;
    });
},
onChangeState() {
  axios
    .get(
      `https://www.universal-tutorial.com/api/cities/${this.selectedState}`,
      {
        headers: {
          Authorization: `Bearer ${this.authToken}`,
          Accept: "application/json",
        },
      }
    )
    .then((res) => {
      this.listCities = res.data;
    });
},

DEMO

使用 Rest Api 如何在 Vuejs 的下拉列表中加载数据？

Using Rest Api how to load data in dropdown in Vuejs?

javascript

drop-down-menu

vue.js

axios