Axios 請求提供 getter setter 方法而不是查詢的數據

Question

我正在使用 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 的新手，所以也許我錯過了一些很容易的東西，但我似乎無法弄清楚這一點。

Answer 1

寫上我上面的評論作為對此的規范答案，因為它不斷出現......

您正在查看的是 Vue 如何代理您的數據以使其具有反應性。 這是因為您在 Vue 實例數據屬性上使用console.log() 。

當您為data屬性賦值時，它會被轉換為可觀察對象，以便 Vue 可以被動地處理它。 我建議你不要嘗試console.log()任何分配給this東西，如果你在呈現響應時遇到問題，請使用Vue Devtools瀏覽器擴展來檢查你的組件及其數據。

請注意，這里沒有任何問題。