(Несколько) Axios Опубликовать запрос / params вопрос - PullRequest
Новая
       21

(Несколько) Axios Опубликовать запрос / params вопрос

0 голосов
/ 29 сентября 2018

Это многокомпонентный вопрос (и по совпадению мой первый здесь, на стеке!).В качестве предисловия я создаю сайт с бэкэндом Rails и внешним интерфейсом Vue.js.

Моя проблема связана с запросом Axios POST.Я пытаюсь отправить два POST-запроса одним нажатием кнопки отправки.У меня есть контроллер "Trips" и контроллер "User_Trips" - последний из которых функционирует как соединение с другими таблицами в моей базе данных.Для того, чтобы появилось вновь созданное путешествие, необходимо также создать новый user_trip.

Моя поездка отправляет сообщения просто отлично и появляется, когда я ищу его в Postico, но моя user_trip не публикуется успешно, и я думаю, что это потому, что я изо всех сил пытаюсь определить, как пройтинедавно созданный идентификатор поездки в качестве параметра, необходимого для создания 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'of undefined , и я думаю, что это потому, что я не выбираю правильную поездку из массива ... НО, когда я смотрю на запрос GET в журнале, вновь созданная поездка не отображается - она ​​тольковидна моя база.Любые полезные предложения приветствуются!- Спасибо

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Разобрался!Большое спасибо полезным комментаторам и ответчикам.

<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>
0 голосов
/ 29 сентября 2018

Код ломается в строке paramsTwo, поэтому ваш второй пост не будет работать.Убедитесь, что у объекта, возвращаемого вашим API, есть свойство id.Некоторые БД возвращают свойство _id вместо id.

...