Laravel 和 vue axios get 方法返回 Getters & Setters？

Posted 2023-02-22

【中文标题】Laravel 和 vue axios get 方法返回 Getters & Setters？

【英文标题】：Laravel & vue axios get method returns Getters & Setters?

【发布时间】：2019-01-21 23:36:35

【问题描述】：

我是 Vue.js 的新手，正在尝试使用 axios 从 Laravel API 获取数据。 后端的函数返回一个数组数组：

public function getPersonTypes()

    $data = [];
    $personTypes = config('codeechoo.documentation.config.personTypes');
    foreach ($personTypes as $id => $type) 
        $data[] = [
            'id' => $id,
            'name' => trans($type)
        ];
    

    return response()->json($data);

而方法中的Vue函数是：

fetchPersonTypes() 
           axios.get(route('api.documentation.person.types'))
                .then((response) => 
                    console.log(response.data);
                    this.personTypes = response.data;
                );
        

但控制台将结果显示为对象数组，例如：

id: Getter & Setter
name: Getter & Setter

那么我怎样才能得到 id, name props 的真实值呢？

【问题讨论】：

在你的 html 中，你可以使用 personTypes.id && personTypes.name 。

【参考方案1】：

您可以通过字符串化然后将其解析回来来提取数据：

let personTypes = JSON.parse(JSON.stringify(response.data));
console.log(personTypes);

您现在将在控制台中看到的是没有 getter 和 setter 的整个数据。

【讨论】：

谢谢。你知道它为什么会这样吗？

似乎在这里解释：vuejs.org/v2/guide/reactivity.html#How-Changes-Are-Tracked ```` 当您将纯 javascript 对象作为其数据选项传递给 Vue 实例时，Vue 将遍历其所有属性并将它们转换为 getter /setter 使用 Object.defineProperty。 ```

【参考方案2】：

我认为你应该直接调用路由 url。 注意：因为在 axios 中已经设置了默认的 baseURL，所以你不需要输入 base url，只需要输入路径。 示例：不用axios.get(http://yoursite.com/you/path)，只需输入axios.get('your/path')。

fetchPersonTypes() 
    axios.get('your/path').then((data) => 
        console.log(data);
        this.personTypes = data;
    );

【讨论】：

他特意询问如何获取raw 数据，而不是Vue 设置的带有getter 和setter 的数据。