Vue3-案例1 ...-Go服务器开发

要实现根据选择的省份动态加载对应的市和区数据，可以在省份下拉列表的change事件中触发相应的请求。以下是修改后的代码示例：

<div id="app">
  <div id="center">
    省:
    <select v-model="province" @change="loadCities">
      <option v-for="p in provinces" :key="p.id" :value="p.id">{{p.name}}</option>
    </select>
    市:
    <select v-model="city" @change="loadAreas">
      <option v-for="c in cities" :key="c.id" :value="c.id">{{c.name}}</option>
    </select>
    区:
    <select v-model="area">
      <option v-for="a in areas" :key="a.id" :value="a.id">{{a.name}}</option>
    </select>
  </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
  import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
  createApp({
    data() {
      return {
        province: '',
        city: '',
        area: '',

        provinces: [],
        cities: [],
        areas: [],
      };
    },
    methods: {
      loadCities() {
        axios.get(`https://web-server.itheima.net/city?pid=${this.province}`).then((result) => {
          this.cities = result.data.data;
          this.city = this.cities[0].id; // 默认选中第一个城市
          this.loadAreas(); // 加载城市对应的区域数据
        });
      },
      loadAreas() {
        axios.get(`https://web-server.itheima.net/area?cid=${this.city}`).then((result) => {
          this.areas = result.data.data;
          this.area = this.areas[0].id; // 默认选中第一个区域
        });
      },
      search(){
        axios.get('https://web-server.itheima.net/province').then((result) => {
          this.provinces = result.data.data;
          this.province = this.provinces[0].id; // 默认选中第一个省份
          this.loadCities(); // 加载省份对应的城市数据
        });
      }
    },
    mounted() {
      this.search();
    },
  }).mount("#app");
</script>

在修改后的代码中，我们新增了两个方法loadCities()和loadAreas()，用于根据选择的省份加载相应的城市和区域数据。这两个方法分别在省份下拉列表的change事件和城市下拉列表的change事件中被调用。

注意：根据你提供的原始代码，默认选中了第一个省、第一个市和第一个区。如果需要根据具体需求更改默认选项，可以在对应的地方进行修改。

内容由零声教学AI助手提供，问题来源于学员提问