Vue中从Axios GET请求嵌套数组响应取值出现undefined问题

我来帮你梳理下这个问题的可能原因和解决办法～

首先，你遇到的this.result返回undefined的情况，大概率是这几个原因导致的：

1. 初始数据类型不匹配 #

你在data()里把results初始化为空字符串''，但后续赋值的是数组类型。这种类型不一致可能会导致判断数组长度、访问元素时出现异常。

修改方案：把results的初始值改成空数组：

data () {
  return {
    query: '',
    results: [], // 改为空数组
    result: ''
  }
}

2. 未处理数组为空的情况 #

如果你的API请求返回的response.data.items是空数组，那么items[0]就会是undefined，再访问['1:B']自然就返回undefined了。

解决办法：在取值前先判断数组是否有元素：

getResults(query) {
  axios.get(`https://apiexample.com/api/search.php?t_id=${query}`)
    .then(response => {
      // 先打印确认返回的数据结构，方便排查
      console.log('API返回的items:', response.data.items);
      
      this.results = response.data.items;
      
      // 先判断数组是否有内容再取值
      if (this.results.length > 0) {
        this.result = this.results[0]['1:B'];
      } else {
        this.result = '暂无匹配数据';
        console.warn('返回的结果数组为空');
      }
    })
    // 别忘了捕获请求错误，避免控制台报错影响逻辑
    .catch(error => {
      console.error('请求失败:', error);
      this.result = '请求出错，请稍后重试';
    });
}

3. 异步请求未正确触发 #

要确保getResults方法被正确调用，比如在组件挂载时调用，或者绑定到某个用户操作（比如按钮点击）：

mounted() {
  // 假设你有默认的query值，或者从路由/其他地方获取query参数
  this.getResults('默认的t_id值');
}

4. 模板渲染时的容错处理 #

因为Axios请求是异步的，组件初始化时result可能还没被赋值，你可以用空值合并运算符来避免页面出现undefined：

<div class="results" v-if="results.length > 0">
  <p>{{ results }}</p>
  <p>{{ result ?? '加载中...' }}</p>
</div>

另外要说明的是：你用response.data.items[0]['1:B']的取值方式是完全正确的，因为键名包含特殊字符:，必须用方括号语法访问，不能用点语法（比如items[0].1:B是错误写法）。

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