Я работаю с 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') && 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, так что, может быть, мне чего-то очень не хватает, но я не могу понять это.