link1507 link1508 link1509 link1510 link1511 link1512 link1513 link1514 link1515 link1516 link1517 link1518 link1519 link1520 link1521 link1522 link1523 link1524 link1525 link1526 link1527 link1528 link1529 link1530 link1531 link1532 link1533 link1534 link1535 link1536 link1537 link1538 link1539 link1540 link1541 link1542 link1543 link1544 link1545 link1546 link1547 link1548 link1549 link1550 link1551 link1552 link1553 link1554 link1555 link1556 link1557 link1558 link1559 link1560 link1561 link1562 link1563 link1564 link1565 link1566 link1567 link1568 link1569 link1570 link1571 link1572 link1573 link1574 link1575 link1576 link1577 link1578 link1579 link1580 link1581 link1582 link1583 link1584 link1585 link1586 link1587 link1588 link1589 link1590 link1591 link1592 link1593 link1594 link1595 link1596 link1597 link1598 link1599 link1600 link1601 link1602 link1603 link1604 link1605 link1606 link1607 link1608 link1609 link1610 link1611 link1612 link1613 link1614 link1615 link1616 link1617 link1618 link1619 link1620 link1621 link1622 link1623 link1624 link1625 link1626 link1627 link1628 link1629 link1630 link1631 link1632 link1633 link1634 link1635 link1636 link1637 link1638 link1639 link1640 link1641 link1642 link1643

[Vue.js] Axios request giving getter setter methods instead of data queried

I’m working with Laravel and vue.js to make a single page web application. I’ve used vue.js 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. 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)); to get just the raw data, but this doesn’t work when I attempt to store it in this.actions. Here is my index method in my 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.js component to get the data from the controller. 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.

Solution :

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.js proxies the data to make it reactive. This is because you’re using console.log() on a vue.js instance data property.

When you assign values to a data property, it is transformed to an observable so vue.js can treat it reactively. I suggest you forget about trying to console.log() anything assigned to this and use the vue.js Devtools browser extension to inspect the components and their data if you’re having trouble rendering the response.

Please note, there is nothing wrong here.