Блог

Главная - Вопросы по программированию - Запрос Axios, предоставляющий методы getter setter вместо запрашиваемых данных

Запрос Axios, предоставляющий методы getter setter вместо запрашиваемых данных

#vue.js #vuex #vuejs3

#javascript #php #laravel-5 #vue.js #axios

Вопрос:

Я работаю с Laravel и Vue над созданием одностраничного веб-приложения. Я раньше использовал 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') amp;amp; 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=dateamp;sortdirection=desc">Date</a></th>
                <th><a id="sortby-company" class="action-nav" href="?sortby=companyamp;sortdirection=desc">Company</a></th>
                <th><a id="sortby-name" class="action-nav" href="?sortby=nameamp;sortdirection=desc">Name</a></th>
                <th><a id="sortby-communication-type" class="action-nav" href="?sortby=communication-typeamp;sortdirection=desc">Communication Type</a></th>
                <th><a id="sortby-contact" class="action-nav" href="?sortby=contactamp;sortdirection=desc">Contact</a></th>
                <th><a id="sortby-subject" class="action-nav" href="?sortby=subjectamp;sortdirection=desc">Subject</a></th>
                <th><a id="sortby-action" class="action-nav" href="?sortby=actionamp;sortdirection=desc">Comment/Action Item</a></th>
                <th>Archive</th>
                <!-- check if admin?? -->
                    <th><a id="sortby-assigned-to" class="action-nav" href="?sortby=dateamp;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 amp; Setter
​
    2: Getter amp; Setter
​
    3: Getter amp; Setter
​
    4: Getter amp; Setter
​
    5: Getter amp; Setter
​
    6: Getter amp; Setter
​
    7: Getter amp; Setter
​
    8: Getter amp; Setter
​
    9: Getter amp; Setter
​
    10: Getter amp; Setter
​
    __ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
​
    <prototype>: Object { … }

Я ожидал увидеть обычный возвращаемый массив данных, но вместо этого появляется это, а затем компонент не обновляется данными. Я новичок в Vue, так что, возможно, мне не хватает чего-то действительно простого, но, похоже, я не могу понять это.

Комментарии:

1. То, на что вы смотрите, — это то, как Vue прокси ваши данные, чтобы сделать их реактивными. Это потому, что вы используете console.log() свойство данных экземпляра Vue. Если вы просто хотите просмотреть данные, попробуйте console.log(response.data) вместо этого. Пожалуйста, обратите внимание, что здесь нет ничего плохого

2. Это выводит данные, как вы говорили, но когда я сохраняю ответ. данные в this.actions не печатают данные, которые я делаю console.log(this.actions). Выполнение этого также не приводит к тому, что компонент использует данные, которые я пытался сохранить в this.actions . Насколько я могу судить, мне не нужно ничего делать, чтобы Vue использовал это для отображения в компоненте, поскольку так оно и было раньше, но теперь оно не обновляет компонент данными. Нужно ли мне еще что-то менять в возвращаемых данных, чтобы использовать их должным образом?

3. Я скажу это снова… когда вы присваиваете значения data свойству, оно преобразуется в наблюдаемое, поэтому Vue может обрабатывать его реактивно. Я предлагаю вам забыть о попытке присвоить console.log() что-либо назначенному this и использовать расширение браузера Vue Devtool для проверки ваших компонентов и их данных, если у вас возникли проблемы с отображением ответа

4. Кроме того, вы можете попробовать <tr v-for="action in actions" :key="action.id"> , чтобы Vue мог правильно реагировать на изменения массива.

Ответ №1:

Записываю свои комментарии выше как своего рода канонический ответ на это, поскольку он продолжает появляться…

То, на что вы смотрите, — это то, как Vue прокси ваши данные, чтобы сделать их реактивными. Это потому, что вы используете console.log() свойство данных экземпляра Vue.

Когда вы присваиваете значения data свойству, оно преобразуется в наблюдаемое, поэтому Vue может обрабатывать его реактивно. Я предлагаю вам забыть о попытке console.log() что-либо назначить this и использовать расширение браузера Vue Devtools для проверки ваших компонентов и их данных, если у вас возникли проблемы с отображением ответа.

Пожалуйста, обратите внимание, что здесь нет ничего плохого.

Комментарии:

1. Большое вам спасибо, это дало мне много информации о концепции и помогло мне лучше понять, над чем я работал.