Vue.js设置默认地址ID不生效问题求助

1. Axios请求参数顺序错误（核心问题） #

你当前的axios.put调用参数顺序完全错误，导致后端可能根本没收到要设置为默认的地址ID，这就是接口返回成功提示但实际数据没更新的原因。

Axios PUT请求的正确参数格式是：

axios.put(url, 请求数据对象, 配置对象)

你现在把token当成了请求数据传给后端，而真正需要的id却放在了配置对象里，后端自然无法正确处理。修正后的onSetDefault方法：

onSetDefault(id) {
  const token = localStorage.getItem("token");
  axios
    .put(
      `http://localhost:5000/api/addresses/set/default`,
      { id: id }, // 这里是请求数据，把ID传给后端
      {
        headers: {
          Authorization: `Bearer ${token}`, // 注意Bearer后面加空格
          "x-access-token": token
        }
      }
    )
    .then(res => {
      this.message = res.data.message;
      // 刷新地址列表，确保本地数据和后端同步
      this.loadAddresses(); // 假设你有获取地址列表的方法
      console.log(id);
      console.log(res);
    })
    .catch(error => {
      this.message = error.message;
      console.log(error);
    });
}

另外注意Authorization头的格式，Bearer和token之间需要加空格，否则后端可能无法正确解析令牌。

2. 前端本地数据未同步 #

就算后端成功更新了默认地址，你当前的代码也没有刷新前端的addresses数组，所以看到的还是旧数据。解决办法：

• 在请求成功的回调里，调用获取地址列表的方法（比如this.loadAddresses()，逻辑和初始化加载地址一致）
• 或者手动遍历addresses数组，把之前的默认地址标记取消，把当前ID对应的地址设为默认（如果地址对象有isDefault这类字段的话）

3. 模板代码的小问题 #

模板里v-for所在的div上有个多余的v属性，建议删除；同时给@click加上.prevent修饰符，避免点击后页面跳转到顶部的默认行为：

<div
  v-for="(address,index) in addresses"
  :key="address._id"
>
  <!-- Set Address as Default -->
  <a
    href="#"
    @click.prevent="onSetDefault(address._id)"
  >Set as Default</a>
</div>

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