（多個）Axios Post請求/參數問題

Question

這是一個多部分的問題（碰巧是我在堆棧上的第一個問題！）。 首先，我正在構建一個帶有Rails后端和Vue.js前端的網站。

我的問題是Axios POST請求。 我試圖通過單擊提交按鈕來發送兩個 POST請求。 我有一個“ Trips”控制器和一個“ User_Trips”控制器-后者充當數據庫中其他表的聯接。 為了顯示新創建的行程，也需要創建一個新的user_trip。

我的旅程發布得很好，並且在Postico中查找時會顯示出來，但是我的user_trip未能成功發布，這是因為我正在努力確定如何將最近創建的旅程的ID傳遞為創建所需的參數一個user_trip。 這是我正在Vue.js上處理的部分代碼：

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      trips: [],
      errors: [],
      name: "",
      country: "",
      state: "",
      city: "",
      postal_code: "",
      start_date: "",
      end_date: "",
      image: "", 
      trip: this.trip
    };
  },
  mounted: function() {
    // axios.get("http://localhost:3000/api/trips").then(
    //   function(response) {
    //     console.log(response);
    //     this.trips = response.data.trips;
    //   }.bind(this)
    // );
  },
  methods: {
    submit: function() {
      var params = {
        name: this.name,
        country: this.country,
        state: this.state,
        city: this.city,
        postal_code: this.postal_code,
        start_date: this.start_date,
        end_date: this.end_date,
        image: this.image
      };
      axios
        .post("http://localhost:3000/api/trips", params)
        .then(response => {
          axios.get("http://localhost:3000/api/trips").then(
            function(response) {
              console.log(response);
              this.trips = response.data.trips;
            }.bind(this)
          );
        })
        .catch(error => {
          this.errors = error.response.data.errors;
        });
      var paramsTwo = {
        trip_id: this.trip.id
      };
      axios
        .post("http://localhost:3000/api/usertrips", paramsTwo)
        .then(response => {
          this.$router.go("/home");
        })
        .catch(error => {
          this.errors = error.response.data.errors;
        });
    }
  }
};
</script>

這是我在控制台日志中收到的錯誤消息： Uncaught TypeError：無法讀取未定義的屬性'id'，我認為這是因為我沒有從數組中選擇正確的行程...但是當我查看日志中的GET請求，新創建的旅程不會顯示-僅在我的數據庫中可見。 任何有用的建議都將受到贊賞！ - 謝謝

Answer 1

代碼在paramsTwo行處paramsTwo ，這就是為什么第二篇文章不起作用的原因。 確保您的API返回的對象具有id屬性。 一些數據庫返回_id屬性而不是id。

Answer 2

弄清楚了！ 非常感謝有用的評論者和回答者。

<script>
import axios from "axios";
export default {
  data: function() {
    return {
      trips: [],
      errors: [],
      name: "",
      country: "",
      state: "",
      city: "",
      postal_code: "",
      start_date: "",
      end_date: "",
      image: "", 
    };
  },
  mounted: function() {
  },
  methods: {
    submit: function() {
      var params = {
        name: this.name,
        country: this.country,
        state: this.state,
        city: this.city,
        postal_code: this.postal_code,
        start_date: this.start_date,
        end_date: this.end_date,
        image: this.image
      };
      axios
        .post("http://localhost:3000/api/trips", params)
        .then(response => {
          console.log(response);
          this.trip = response.data;
          var paramsTwo = {
            trip_id: this.trip.id
          };
          axios
            .post("http://localhost:3000/api/usertrips", paramsTwo)
            .then(response => {
              this.$router.go("/home");
            })
            .catch(error => {
              this.errors = error.response.data.errors;
            });
        }
        );
    }
  }
};
</script>