반응형
Axios 요청 - 쿼리된 데이터 대신 Getter setter 메서드를 제공
나는 라라벨과 부에와 함께 한 페이지 웹 애플리케이션을 만들고 있다.이전에도 Vue를 사용해 문제없이 컨트롤러를 사용하여 데이터베이스에서 데이터를 받아 본 적이 있지만, 어떤 이유에서인지 지금은 내가 조회한 데이터 대신 각 상위 객체에 저장된 게터 및 세터 메서드가 있는 겉보기에는 무한히 중첩된 JS 객체만 받고 있다.비슷한 문제를 가진 다른 사람들을 본 적이 있지만, 그들에게 효과가 있었던 해결책은 나에게 효과가 없었다.예를 들어, 일부 사람들은 원시 데이터만 얻기 위해 JSON.parse(JSON.stringify(response.data);;를 사용했지만, 내가 이 동작에 저장하려고 하면 이것이 작동하지 않는다.내 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부에가 그것을 반응적으로 다룰 수 있도록, 그것은 관찰 가능한 것으로 변형된다.내가 제안하는건 네가 하려고 하는걸 잊는거야.console.log()에 할당된 모든 것.this응답을 렌더링하는 데 문제가 있는 경우 Vue Devtools 브라우저 확장을 사용하여 구성 요소와 해당 데이터를 검사하십시오.
여기엔 아무 문제가 없다는 것을 알아두십시오.
반응형
'programing' 카테고리의 다른 글
| Java : 비교 대상 대 비교 대상 (0) | 2022.05.23 |
|---|---|
| 자동 스크롤 기능 vue-수신 가능 사용 방법 (0) | 2022.05.23 |
| Vue.js 계산된 속성을 강제로 다시 계산하시겠습니까? (0) | 2022.05.23 |
| 외부 라이브러리에서 정의되지 않은 속성을 추가할 때 Vue에서 변경 사항을 감지하지 못함 (0) | 2022.05.23 |
| 전에 경시하라, 아니면 그 후에 경시하라. (0) | 2022.05.23 |