# 참고 https://vuetifyjs.com/en/components/data-tables
<template>
<v-data-table :headers="headers" :items="items" :items-per-page="5" class="elevation-1"></v-data-table>
</template>
export default {
name: "ysoftman-list",
data() {
return {
item: []
}
},
methods: {
getMyData() {
axios
.get("/api/mydata", {
params: {
id: "999"
}
})
.then(response => {
// this.items = response.data || [];
// response.data = {"id":"a123", "field1": "aaa"}
// 값은 추가되지만 v-data-table 에 표시되지 않는다.
// this.items[0] = response.data
// push 를 사용하면 json 데이터의 getter setter 등의 함수도 같이 생성되어, v-data-table 에서 사용된다.
// 참고 https://vuejsdevelopers.com/2017/03/05/vue-js-reactivity/
this.items.push(response.data)
console.log(this.items.length, this.items[0]);
})
.catch(error => {})
},
},
// 컴포넌트가 마운트 될때
mounted() {
this.getMyData();
}
}
}
comments:
댓글 쓰기