Vue Component 如何传递一个对象给 axios.post 来处理请求？

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

这是我在使用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
})

Answer 2

传递数据的最佳方式是使用 this.$data

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

Answer 3

响应代码是 500，所以我认为问题出在您的服务器上。

Vue Component 如何传递一个对象给 axios.post 来处理请求？

How to pass an object to axios.post to handle the request in Vue Component?

object

vue.js

axios

laravel-5.6