[英]Axios request giving getter setter methods instead of data queried
I'm working with Laravel and Vue to make a single page web application.我正在使用 Laravel 和 Vue 制作单页 Web 应用程序。 I've used Vue before to get the data from a database using a controller with no problem, but for some reason I'm now only getting a seemingly infinitely nested JS object that has getter and setter methods stored in each parent object instead of the data I queried.我之前使用过 Vue 使用控制器从数据库中获取数据没有问题,但由于某种原因,我现在只得到一个看似无限嵌套的 JS 对象,它在每个父对象中存储了 getter 和 setter 方法,而不是我查询的数据。 I've seen other people with similar issues, but the solutions that worked for them didn't work for me.我见过其他人有类似问题,但对他们有用的解决方案对我不起作用。 For example, some people used JSON.parse(JSON.stringify(response.data));比如有人用 JSON.parse(JSON.stringify(response.data)); to get just the raw data, but this doesn't work when I attempt to store it in this.actions.仅获取原始数据,但是当我尝试将其存储在 this.actions 中时这不起作用。 Here is my index method in my ActionLogController这是我的 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);
}
This is my Vue component to get the data from the controller.这是我的 Vue 组件,用于从控制器获取数据。 I know the template code works, because it worked fine when I sent it dummy data before pulling the data from the controller.我知道模板代码有效,因为当我在从控制器中提取数据之前向它发送虚拟数据时它工作正常。
<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>
This is the output I get in the browser console这是我在浏览器控制台中得到的输出
{…}
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 { … }
I was expecting to see the normal array of data that gets returned, but this is what shows up instead and then won't update the component with the data.我期待看到返回的正常数据数组,但这是显示出来的,然后不会用数据更新组件。 I'm new to Vue, so maybe there's something really easy I missing, but I can't seem to figure this out.我是 Vue 的新手,所以也许我错过了一些很容易的东西,但我似乎无法弄清楚这一点。
Writing up my comments above as a sort of canonical answer to this as it keeps coming up...写上我上面的评论作为对此的规范答案,因为它不断出现......
What you're looking at is how Vue proxies your data to make it reactive.您正在查看的是 Vue 如何代理您的数据以使其具有反应性。 This is because you're using console.log()
on a Vue instance data property .这是因为您在 Vue 实例数据属性上使用console.log()
。
When you assign values to a data
property, it is transformed to an observable so Vue can treat it reactively.当您为data
属性赋值时,它会被转换为可观察对象,以便 Vue 可以被动地处理它。 I suggest you forget about trying to console.log()
anything assigned to this
and use the Vue Devtools browser extension to inspect your components and their data if you're having trouble rendering the response.我建议你不要尝试console.log()
任何分配给this
东西,如果你在呈现响应时遇到问题,请使用Vue Devtools浏览器扩展来检查你的组件及其数据。
Please note, there is nothing wrong here .请注意,这里没有任何问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.