axios请求给getter setter方法而不是查询数据

Posted 2023-02-22

【中文标题】axios请求给getter setter方法而不是查询数据

【英文标题】：Axios request giving getter setter methods instead of data queried

【发布时间】：2019-03-21 14:26:00

【问题描述】：

我正在使用 Laravel 和 Vue 制作单页 Web 应用程序。我之前使用 Vue 使用控制器从数据库中获取数据没有问题，但由于某种原因，我现在只得到一个看似无限嵌套的 JS 对象，它在每个父对象中存储了 getter 和 setter 方法，而不是我查询的数据。我见过其他人有类似的问题，但对他们有用的解决方案对我不起作用。比如有人用 JSON.parse(JSON.stringify(response.data));只获取原始数据，但是当我尝试将其存储在 this.actions 中时这不起作用。这是我的 ActionLogController 中的索引方法

public function index($url)


    $companyName = explode("/", $url);

    if(Auth::check())
    
        $company = Company::where('name', '=', strtolower($companyName[count($companyName) - 1]))->first();

        // If sortby not empty
        $sortby = "created_at";

        //assume desc (most recent)
        $sortdirection = 'desc';

        if(request()->has('sortdirection') && request()->sortdirection == 'asc')
        
            $sortdirection = 'asc';
        

        // if sortby is set
        if(request()->has('sortby')) 
        
            $sortby = request()->sortby;

            switch($sortby) 
            
                case "date":
                    $sortby = "string_date";
                break;
                case "company":
                    $sortby = "company_name";
                break;
                case "name":
                    // do nothing
                break;
                case "communication-type":
                    $sortby = "communication_type";
                break;
                case "contact":
                    // do nothing
                break;
                case "subject":
                    $sortby = "status";
                break;
                case "assigned-to":
                    $sortby = "assigned_to";
                break;
                case "action":
                    $sortby = "action_item";
                break;
                case "assigned-to":
                    $sortby = "assigned_to";
                break;
                default:
                    $sortby = 'created_at';
                break;
            
        
    

    if($sortdirection == 'asc') 
        return Auth::user()->actionLogs
            ->where('activity_key', '=', '1,' . $company->id)
            ->sortBy($sortby);
    

    return Auth::user()->actionLogs
        ->where('activity_key', '=', '1,' . $company->id)
        ->sortByDesc($sortby);

这是我从控制器获取数据的 Vue 组件。我知道模板代码可以正常工作，因为当我在从控制器中提取数据之前向它发送虚拟数据时，它可以正常工作。

<style scoped>
.action-link 
    cursor: pointer;


.m-b-none 
    margin-bottom: 0;

</style>

<template>
<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th><a id="sortby-date" class="action-nav" href="?sortby=date&sortdirection=desc">Date</a></th>
                <th><a id="sortby-company" class="action-nav" href="?sortby=company&sortdirection=desc">Company</a></th>
                <th><a id="sortby-name" class="action-nav" href="?sortby=name&sortdirection=desc">Name</a></th>
                <th><a id="sortby-communication-type" class="action-nav" href="?sortby=communication-type&sortdirection=desc">Communication Type</a></th>
                <th><a id="sortby-contact" class="action-nav" href="?sortby=contact&sortdirection=desc">Contact</a></th>
                <th><a id="sortby-subject" class="action-nav" href="?sortby=subject&sortdirection=desc">Subject</a></th>
                <th><a id="sortby-action" class="action-nav" href="?sortby=action&sortdirection=desc">Comment/Action Item</a></th>
                <th>Archive</th>
                <!-- check if admin?? -->
                    <th><a id="sortby-assigned-to" class="action-nav" href="?sortby=date&sortdirection=desc">Assigned To</a></th>
                <!-- /check if admin?? -->
            </tr>
        </thead>
        <tbody v-if="actions.length > 0">
            <tr v-for="action in actions">
                <td>
                     action.string_date 
                </td>
                <td>
                     action.company_name 
                </td>
                <td>
                     action.name 
                </td>
                <td>
                     action.communication_type 
                </td>
                <td>
                     action.contact 
                </td>
                <td>
                     action.status 
                </td>
                <td>
                     action.action_item 
                </td>
                <td>
                    <input type="checkbox" :id="'archive-' + action.id" class="archive" :name="'archive-' + action.id">
                </td>
                <td :id="'record-' + action.id" class="assigned-to">
                     action.assigned_to 
                </td>
            </tr>
        </tbody>
    </table>
    <p id="add-action" style="text-align: center;">
      <button id="action-log-add" class="btn btn-sm btn-primary edit">Add Item</button>
      <button id="action-log-edit" class="btn btn-sm btn-danger edit">Edit Items</button>
    </p>
</div>
</template>

<script>
export default 
    data() 
        return 
            actions: []
        
    ,
    methods: 
        getActionLogs(location) 

            var company = location.split("/");
            company = company[company.length - 1];

            axios.get('/action-log/' + company)
                 .then(response => 

                    this.actions = response.data;                        
                    console.log(this.actions);

                 )
                 .catch(error => 
                    console.log('error! ' + error);
                 );
        
    ,
    mounted() 
        this.getActionLogs(window.location.href);
    

</script>

这是我在浏览器控制台中得到的输出

    …
​
    1: Getter & Setter
​
    2: Getter & Setter
​
    3: Getter & Setter
​
    4: Getter & Setter
​
    5: Getter & Setter
​
    6: Getter & Setter
​
    7: Getter & Setter
​
    8: Getter & Setter
​
    9: Getter & Setter
​
    10: Getter & Setter
​
    __ob__: Object  value: …, dep: …, vmCount: 0 
​
    <prototype>: Object  … 

我期待看到返回的正常数据数组，但这是显示出来的，然后不会用数据更新组件。我是 Vue 的新手，所以也许我很容易错过一些东西，但我似乎无法弄清楚。

【问题讨论】：

您正在查看的是 Vue 如何代理您的数据以使其具有反应性。这是因为您在 Vue 实例数据属性上使用了 console.log()。如果您只想查看数据，请尝试使用console.log(response.data)。请注意，这里没有错

像你说的那样打印出数据，但是当我将 response.data 存储在 this.actions 中时，它不会打印我做的数据 console.log(this.actions)。这样做也不会导致组件使用我尝试存储在 this.actions 中的数据。据我所知，我不需要做任何事情让 Vue 使用它来显示在组件中，因为它以前就是这样，但现在它不会用数据更新组件。我是否还需要更改有关返回数据的其他任何内容才能正确使用它？

我再说一遍......当你为 data 属性赋值时，它会被转换为一个 observable，因此 Vue 可以被动地处理它。我建议您忘记尝试 console.log() 分配给 this 的任何内容，如果您在呈现响应时遇到问题，请使用 Vue Devtool 浏览器扩展来检查您的组件及其数据

另外，您可能想尝试<tr v-for="action in actions" :key="action.id">，以便 Vue 可以正确响应数组更改。

【参考方案1】：

在上面写我的 cmets 作为对此问题的一种规范答案，因为它不断出现......

您正在查看的是 Vue 如何代理您的数据以使其具有反应性。这是因为您在 Vue 实例 data property 上使用了 console.log()。

当您将值分配给 data 属性时，它会转换为可观察对象，因此 Vue 可以反应性地处理它。我建议您忘记尝试 console.log() 分配给 this 的任何内容，如果您在呈现响应时遇到问题，请使用 Vue Devtools 浏览器扩展来检查您的组件及其数据。

请注意，这里没有任何问题。

【讨论】：

非常感谢，这让我对这个概念有了很多深入的了解，并帮助我更好地掌握了我正在做的事情。