Как передать объект в axios.post для обработки запроса в Vue Component?

Question

Я пытаюсь передать объект через axios.post. Но, видимо, способ, которым я делаю это неправильно Я получаю эту ошибку

Error: "Request failed with status code 500"

Когда я отправляю данные как обычную строку, у меня нет проблем.

Мой код axios.post выглядит так

axios.post('/api/send', {
  contactInfo: this.contactInfo
  })
    .then(function (response) {
     console.log(response.data);
     })
     .catch(function (error) {
      console.log(error);
      });

Мой объект contactInfo похож на это ...

export default {
        name: 'app',
        data() {
            return {

                contactInfo: {
                    email: 'test@test.com',
                    mobile: '11112222'
                }

            }
        },

Answer 1

Лучший способ передать ваши данные - это использовать. $ Data

axios.post('url', this.$data)
  .then(function (response) {
    console.log(response);
    })
     .catch(function (error) {
      console.log(error);
      });

Answer 2

Код ответа 500, поэтому я думаю, что проблема в вашем сервере.

Answer 3

Это то, что я делаю, когда использую axios c:

Используйте FormData и добавьте в него данные, используя метод .set, например:

// Declare the body
let formData = new FormData ()
// Add data to body
formData.set('name1', variable1)
formData.set('name2', variable2)
// Request
axios.post('url', formData).then(response => {
  // Do something
}).catch(error => {
  // Do something
})