Fra*_* A. 5 javascript php vue.js laravel-5 axios
我正在使用 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 的新手，所以也许我错过了一些很容易的东西，但我似乎无法弄清楚这一点。
写下我上面的评论作为对此问题的一种规范答案，因为它不断出现......
您所看到的是 Vue 如何代理您的数据以使其具有反应性。这是因为您正在使用console.log()Vue 实例数据属性。
当你给一个属性赋值时data，它会被转换为一个可观察的对象，这样 Vue 就可以反应性地对待它。如果您在渲染响应时遇到问题，我建议您忘记尝试分配console.log()任何内容this，并使用Vue Devtools浏览器扩展来检查您的组件及其数据。
请注意，这里没有任何问题。