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浏览器扩展来检查组件及其数据。

请注意，这里没有问题。

Axios请求提供getter setter方法，而不是查询数据

1 个答案: