如何用Axios数据填充Vuetify Select？填充异常问题求助

我一眼就看到你代码里的关键问题啦——:item-text和:item-value的用法错了！这俩属性需要的是字符串形式的字段名称，用来指定数组中每个对象的哪个属性作为显示文本和值，而不是直接访问数组的id属性（毕竟entidades是数组，它本身没有id属性）。

第一步：修正item-text和item-value的绑定 #

把:item-text="entidades.id"改成item-text="id"，:item-value="entidades.id"改成item-value="id"。注意这里不需要加冒号:，因为我们是直接传递静态的字段名字符串，不是绑定动态变量。

修正后的组件代码应该是这样的：

<v-select
  :items="entidades"
  item-text="id"
  item-value="id"
  single-line
  auto
  prepend-icon="group_work"
  label="Seleccionar Grupo..."
  v-model="selectedEntity"
></v-select>

（额外加了v-model来绑定选中的值，方便你后续使用选中项）

第二步：确保数据正确加载并赋值 #

虽然你说Get请求返回了有效数据，但还要确认你是否把响应数据正确赋值给了entidades变量。比如在Vue组件的脚本部分，要确保异步请求完成后更新数据：

export default {
  data() {
    return {
      entidades: [], // 初始化为空数组
      selectedEntity: null
    };
  },
  mounted() {
    // 这里替换成你的实际Get请求逻辑
    this.$axios.get('/tu-api-url')
      .then(response => {
        this.entidades = response.data; // 把接口返回的数据赋值给entidades
      })
      .catch(error => {
        console.error('加载数据失败:', error);
      });
  }
};

额外检查点 #

1. 确认entidades在数据加载完成后确实被填充了——可以在组件里加个{{ entidades }}插值，看看页面上是否能看到数组内容。
2. 如果你的数据结构后续有变化（比如新增了name字段要显示），只需要把item-text改成对应的字段名（比如item-text="name"）就行。

按照这个方法调整后，你的Vuetify Select应该就能正常显示选项啦！

内容的提问来源于stack exchange，提问作者Isaías Orozco Toledo