vue list 에 추가하기

# v-data-table 템플릿에 데이터를 표시하고자 할때
# 참고 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>

# 다음과 같이 item 리스트에 값을 추가할때 push 를 사용해야 한다.
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();

  }
}