반응형
Vue 어레이에서 테이블로의 문제
Vue를 사용하여 어레이 데이터를 테이블에 인쇄하는 데 문제가 있습니다.vue를 사용하여 값을 해석하고 테이블에 넣을 수 있도록 누가 도와주시겠습니까?아래의 코드를 참조해 주세요.2개의 배열이 없으면 작동하지만, 응답이 여러 개여서 어떻게 해야 할지 모르겠습니다.
이것은 당연한 나의 직무이다
//HTML 코드
<tbody>
<tr v-for="(input, index) in inputs">
<th>((input.id))</th>
<th>((input.tracking_number))</th>
<td>((input.first_name))</td>
<td>((input.last_name))</td>
<td>((input.weight))</td>
<td>((input.description))</td>
<td>((input.courier))</td>
</tr>
</tbody>
//HTML 종료
//Vue 코드
var app = new Vue({
el: '#app',
data: {
inputs: [],
form: {
scanval: null
}
},
methods: {
updatetable() {
this.$http.get('someroute', {params: {page: this.form}})
.then(response => {
if (response.body != "null") {
console.log(response);
this.inputs.push({
id: response.body.id,
tracking_number: response.body.tracking_number,
first_name: response.body.first_name,
last_name: response.body.last_name,
weight: response.body.weight,
description: response.body.description,
courier: response.body.courier
})
this.form.scanval = ""
} else {
this.form.scanval = "",
alert("No items found")
}
}, response => {
alert("no item found");
});
},
셋팅 완료inputs
응답 주체와 동일합니다.
this.inputs = response.body
그러면 현재 값이 대체됩니다.inputs
반응과 함께.응답을 추가할 경우inputs
그 후, 응답을 접속할 수 있습니다.inputs
:
this.inputs = this.inputs.concat(response.body)
언급URL : https://stackoverflow.com/questions/46107211/vue-array-to-table-issues
반응형
'programing' 카테고리의 다른 글
0.1을 여러 번 더하는 것은 왜 무손실인 채로 남습니까? (0) | 2022.08.28 |
---|---|
오른쪽 정렬 버튼 그룹 Vuetify (0) | 2022.08.28 |
vuex 지속 상태가 전체적으로 변환으로 업데이트되지 않음 (0) | 2022.08.28 |
Android 권한을 선언해도 작동하지 않음 (0) | 2022.08.28 |
Vuex 저장소 변환에 어레이 커밋 (0) | 2022.08.24 |