olicitação @Axios fornecendo métodos getter setter em vez de dados consultados
Estou trabalhando com o Laravel e o Vue para criar um aplicativo da web de uma única página. Eu usei o Vue antes para obter os dados de um banco de dados usando um controlador sem nenhum problema, mas por alguma razão agora estou recebendo apenas um objeto JS aparentemente infinitamente aninhado que possui métodos getter e setter armazenados em cada objeto pai em vez do dados que eu consultei. Vi outras pessoas com problemas semelhantes, mas as soluções que funcionaram para elas não funcionaram para mim. Por exemplo, algumas pessoas usaram JSON.parse (JSON.stringify (response.data)); para obter apenas os dados brutos, mas isso não funciona quando tento armazená-los neste arquivo .actions. Aqui está o meu método de índice no meu 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);
}
Este é o meu componente Vue para obter os dados do controlador. Sei que o código do modelo funciona, porque funcionou bem quando enviei dados fictícios antes de extrair os dados do controlado
<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>
Esta é a saída que recebo no console do navegador
{…}
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 { … }
Eu esperava ver a matriz normal de dados que é retornada, mas é isso que aparece e não atualiza o componente com os dados. Eu sou novo no Vue, então talvez exista algo realmente fácil, mas não consigo entender isso.