如何将Ajax返回的数组对象数据传递至Vue并改写Ajax代码？

嘿，我发现问题所在了——你的Vue组件里adrInfo定义的是数组结构（初始是包含单个空对象的数组），但后端目前返回的是单个对象，两者数据结构不匹配，导致没法直接对应赋值。给你两种简单的解决思路：

方案1：修改后端代码（推荐，前后端结构统一） #

直接把后端的单个对象包裹进数组再返回，这样和Vue的data结构完全对齐，前端不需要额外处理：

$adrInfo = [ 'title' => 'test','zipcode' => 123456, 'adr1'=> 'php street', 'adr2'=> '232'];
// 将单个对象放入数组中返回
return [ 'adrInfo' => [$adrInfo], ];

方案2：修改前端Ajax接收逻辑（如果无法调整后端） #

如果后端代码不方便修改，就在前端拿到响应后，把返回的单个对象转换成数组再赋值给adrInfo。这里给你两种常见Ajax库的示例：

用Axios的情况： #

// 在Vue组件的methods中定义请求方法
methods: {
  fetchAdrInfo() {
    axios.get('/你的接口地址')
      .then(response => {
        // 把后端返回的单个对象包装成数组
        this.adrInfo = [response.data.adrInfo];
      })
      .catch(error => {
        console.error('获取地址信息失败:', error);
      });
  }
}

用jQuery Ajax的情况： #

methods: {
  fetchAdrInfo() {
    $.ajax({
      url: '/你的接口地址',
      method: 'GET',
      success: (data) => {
        // 将单个对象转为数组后赋值
        this.adrInfo = [data.adrInfo];
      },
      error: (xhr) => {
        console.error('获取地址信息失败:', xhr);
      }
    });
  }
}

两种方案任选其一即可，优先推荐方案1，因为前后端数据结构保持一致，后续维护和扩展会更省心。

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