Vue.js添加created()后Axios POST请求报400错误求助

你遇到的400错误核心是数据变量被错误覆盖：

• 原本data里的travel是用来存储新建旅行的表单对象，但在created钩子中，你把API返回的旅行列表数组赋值给了this.travel，导致后续调用saveTravel时，Axios把数组作为post请求的payload发送给后端。
• 后端接口api/travel期望接收单个旅行对象，而非数组，因此返回400请求格式错误。

把列表数据和新建表单数据分开存储，彻底避免变量冲突：

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 存储新建旅行的表单数据
      newTravel: {
        pays: "",
        capitale: "",
        date_debut: "",
        date_fin: ""
        // drapeau: ""
      },
      // 存储从API获取的旅行列表
      travelList: []
    };
  },
  methods: {
    saveTravel() {
      // 使用newTravel作为post参数
      axios.post("api/travel", this.newTravel)
        .then(response => {
          console.log(response);
          // 可选：创建成功后刷新列表
          this.fetchTravels();
        })
        .catch(error => {
          // 新增错误捕获，方便排查问题
          console.error("创建旅行失败:", error);
        });
    },

    // 把获取列表的逻辑抽成方法，方便复用
    fetchTravels() {
      axios.get("api/travels")
        .then(response => {
          this.travelList = response.data;
        })
        .catch(error => {
          console.error("获取列表失败:", error);
        });
    }
  },
  created() {
    // 调用方法获取列表，赋值给travelList
    this.fetchTravels();
  }
};
</script>

• 变量拆分：用travelList存列表数据，newTravel存新建表单数据，彻底避免覆盖问题。
• 错误捕获：给Axios请求添加.catch()，可以查看更详细的错误信息，方便调试。
• 方法复用：把获取列表的逻辑抽成fetchTravels方法，创建旅行成功后可调用它刷新列表，提升用户体验。

如果想尝试async/await，可把方法改成以下形式，逻辑更直观：

methods: {
  async saveTravel() {
    try {
      const response = await axios.post("api/travel", this.newTravel);
      console.log(response);
      await this.fetchTravels();
    } catch (error) {
      console.error("创建旅行失败:", error);
    }
  },

  async fetchTravels() {
    try {
      const response = await axios.get("api/travels");
      this.travelList = response.data;
    } catch (error) {
      console.error("获取列表失败:", error);
    }
  }
},
async created() {
  await this.fetchTravels();
}

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