使用Axios Post Form Symfony访问Vue JS数据

Question

嗨，我正在尝试通过axios从symfony后端访问vue.js数据数组。这是我的代码。

var vm = new Vue({
                el: '#el',
                delimiters: ["[[", "]]"],
                data: {
                    brand: 0,
                    model: 0,
                    country: "europe",
                },
                created: function () {
                },
                updated: function () {
                    axios.post('http://localhost:81/lnt/public/member/car_result', {data: this.data})
                            .then(function (response) {

                            });
                }
            });

这是我的symfony代码，

/**
 * @Route("/car_result", name="car_result", methods="POST")
 */
public function carResult(Request $request) {
    $data = $request->getContent();
    $data = json_decode($data, true);

    $brand = $data['brand'];
    .......
}

但是不幸的是，我得到的是没有称为brand :(的索引。如果有人可以帮助我，那将非常好。认为我需要找到一种将完整的数据数组发送到后端的方法< / strong> 我可以这样发送数据，

axios.post('http://localhost:81/lnt/public/member/car_result', {brand: this.brand})

Answer 1

将axios代码写为

 axios.post('http://localhost:81/lnt/public/member/car_result', this.data)
                            .then(function (response) {

Answer 2

此代码有两个问题。

1 this.data未定义

您的数据如下：

{data: this.data}

您可能希望拥有结构

{
    data: {
        brand: 0,
        model: 0,
        country: "europe",
    }
}

但是由于this.data不是Vue实例的data属性而无法使用。这似乎很神奇，但是打电话给this['property']时，您要求Vue输入data的反应性的值，因此，如果要获取brand，则应键入this.brand。

2您的客户端和服务器上的数据模型不同

如果json的结构可以实现，那么在您询问的Symfony控制器中

$brand = json_decode($request->getContent(), true)['brand'];

但是实际上，您的请求在第一级没有“品牌”密钥。您应该将后端代码替换为

$brand = json_decode($request->getContent(), true)['data']['brand'];

或将请求的客户代码代码粘贴正文替换为

{brand: this.brand}