如何通过Rest API为Vuetify Select加载数据（附现有代码）

问题分析 #

当前代码存在两个核心问题：

1. 变量冲突：v-model和:items绑定了同一个provinsi变量，导致选中值与选项列表互相干扰
2. DOM操作不符合Vue规范：手动通过innerHTML添加<option>标签，违背Vue响应式数据驱动原则，Vuetify的v-select依赖:items属性渲染选项，而非原生option标签

修正后的代码 #

Vuetify模板 #

<div class="mb-4">
  <v-select
    v-model="selectedProvinsi"
    :items="provinsiList"
    item-text="name"
    item-value="id"
    :rules="[(v) => !!v || 'Provinsi wajib diisi']"
    label="Pilih Provinsi"
    color="accent"
    placeholder="Pilih salah satu"
    :menu-props="{ overflowX: true }"
    persistent-placeholder
    required
  ></v-select>
</div>

JS脚本 #

export default {
  data() {
    return {
      selectedProvinsi: null, // 存储选中的省份值
      provinsiList: [] // 存储从API获取的省份列表
    }
  },
  mounted() {
    fetch(`https://kanglerian.github.io/api-wilayah-indonesia/api/provinces.json`)
      .then(response => response.json())
      .then(provinces => {
        // 直接赋值给响应式变量，Vuetify自动渲染选项
        this.provinsiList = provinces;
      })
      .catch(error => {
        console.error('加载省份数据失败:', error);
      });
  }
}

关键说明 #

• 变量分离：用selectedProvinsi存储选中值，provinsiList存储选项列表，彻底避免变量冲突
• 响应式更新：修改Vue实例的provinsiList后，Vuetify会自动重新渲染下拉选项，无需手动操作DOM
• 选项配置：通过item-text="name"指定显示的文本字段，item-value="id"指定选中时绑定的数值（若需绑定省份名称，可改为item-value="name"）
• 错误处理：添加catch块捕获API请求异常，便于调试排查问题

内容的提问来源于stack exchange，提问作者Exidity