用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'];
    .......
}

但不幸的是，我得到的是没有名为品牌的索引 :(。如果有人能在这方面帮助我，那就太好了。认为我需要找到一种方法将完整的数据数组发送到后端 我可以这样发送数据，

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 实例的数据属性，所以它不起作用。它看起来很神奇，但是调用 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}