vue 3 js - quasar 게시판 방명록 만들기 5 - 컴포넌트로 데이터 바인딩

https://godffs.tistory.com/3800

vue 3 js - quasar 게시판 방명록 만들기 4 - get api 데이터 받기

이어서...

 

---

글 목록을 가져오는 페이지에 컴포넌트를 사용했다

 

 

src \ pages \ community \ GuestBook.vue 파일에 컴포넌트를 선언하고 바인딩하는 코드를 삭제했다

<template>
  <div class="row">
    <div class="row">
      <div class="col">
        <div class="q-pa-md row q-gutter-md">
          <!-- 컴포넌트 선언 + api 결과값 this.boardList로 prop 넘김 -->
          <ComBoardList :items="this.boardList"></ComBoardList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const baseURI = "/api/*****";
import ComBoardList from "src/components/community/ComBoardList.vue"; // 컴포넌트 선언
import { defineComponent, ref } from "vue";

export default defineComponent({
  // 컨포넌트를 등록
  components: { ComBoardList },

  setup() {
    return {
      boardList: ref([]), // boardList 초기화
    };
  },
  /*
   * beforeCreate, created 를 제외 하고 setup 메서드에서 액세스 할 수 있는 옵션 api 가 9개 있다
   *
   * Composition API: Lifecycle Hooks
   * onBeforeMount– 마운팅이 시작되기 전에 호출됨
   * onMounted– 컴포넌트가 마운트될 때 호출됨
   * onBeforeUpdate– 반응 데이터가 변경되고 다시 렌더링되기 전에 호출됩니다.
   * onUpdated– 다시 렌더링 후 호출
   * onBeforeUnmount– Vue 인스턴스가 파괴되기 전에 호출됨
   * onUnmounted– 인스턴스가 소멸된 후 호출
   * onActivated– 연결 유지 구성 요소가 활성화될 때 호출됩니다.
   * onDeactivated– 연결 유지 구성 요소가 비활성화될 때 호출됩니다.
   * onErrorCaptured– 자식 구성 요소에서 오류가 캡처될 때 호출됩니다.
   */
  created() {
    this.pageLoad();
  },

  methods: {
    pageLoad() {
      this.$axios.get(`${baseURI}/guestbook_read`).then((result) => {
        this.boardList = result.data;
      });
    },
  },
});
</script>

 

src \ components \ ComBoardList.vue 파일 추가

<template>
  <!-- 부모에게서 넘겨받은 props에 items를 화면에 찍음 -->
  <q-card
    class="my-card text-white"
    style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
    v-for="(item, data) in this.items"
    :key="data"
  >
    <q-card-section>
      <div class="text-h6">{{ item.num }} | {{ item.reg_nick }}</div>
      <div class="text-subtitle2">{{ item.reg_user }}</div>
    </q-card-section>

    <q-separator dark inset />

    <q-card-section>
      {{ item.cont }}
    </q-card-section>

    <q-card-section> {{ this.dateFormat(item.reg_date) }}</q-card-section>
  </q-card>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    items: { type: Array, default: () => [] },
  },
  setup() {},
  methods: {
    // 날짜값 yyyy-MM-dd 로 변경
    dateFormat(value) {
      if (value === "") {
        return "";
      }

      // javascript로 날짜값으로 변경
      var date = new Date(value);

      // 년, 월, 일
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();

      // 월 1자리일 경우 앞에 0 붙여주기
      if (month < 10) {
        month = "0" + month;
      }

      // 일 1자리일 경우 앞에 0 붙여주기
      if (day < 10) {
        day = "0" + day;
      }

      return year + "-" + month + "-" + day;
    },
  },
  created() {},
});
</script>

<style lang="sass" scoped>
.my-card
  width: 15%
  max-width: 200px
</style>

 

결과 확인

quasar-project-js.zip

0.21MB