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>

这是我在控制台日志中收到的错误消息： 未捕获的TypeError：无法读取未定义的属性'id'，我认为这是因为当我在日志中查看GET请求时，没有从数组中选择正确的行程...但是，新创建的旅程不会显示-仅在我的数据库中可见。任何有用的建议都将受到赞赏！ -谢谢

Answer 1

代码在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>

（多个）Axios发布请求/参数问题

2 个答案: