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

https://godffs.tistory.com/3795

vue 3 js - quasar 게시판 방명록 만들기 3 - 테이블 사용하기

이어서 작업...

 

 

api 호출하는데 CROS 오류, Access-Control-Allow-Origin 애러 나오면

https://godffs.tistory.com/3801

Vue axios error CROS Access-Control-Allow-Origin

위에 페이지에서 quasar.config.js 코드를 수정한다

---

 

퀘이사에서 제공해주는 테이블 여러 개를 사용해 봤다.

이중 가장 마음에 드는걸로 사용했다.

 

src \ pages \ community \ GuestBook.vue

<template>
  <div class="row">
    <div class="row">
      <div class="col">
        <div class="q-pa-md row q-gutter-md">
          <q-card
            class="my-card text-white"
            style="
              background: radial-gradient(circle, #35a2ff 0%, #014a88 100%);
            "
            v-for="(item, data) in this.rows"
            :key="data"
            >1
            <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>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const baseURI = "/api/*****";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return { rows: [] };
  },
  created() {
    this.pageLoad();
  },
  methods: {
    pageLoad() {
      this.$axios.get(`${baseURI}/guestbook_read`).then((result) => {
        this.rows = result.data;
      });
    },
  },
});
</script>

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

 

결과화면

quasar axios get

여기서 문제가 발생했다

새로고침을 하게 되면 데이터가 안 찍힌다. api 호출 잘되고 값도 잘 가져오는데 화면에 안 나온다

 

그래서 수정은 해봤는데...

data 메서드를 추가했더니 잘된다

잘되긴 하는데... 뭔가... 아닌 거 같음... 그래서 다시 수정했다

왜 이렇게 해야만 했는지, 왜 이렇게 수정했는지를 알아보려면

 

composition api에 대해서 알아야 한다...

<script>
const baseURI = "/api/*****";
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const rows = ref([]);

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

결과 확인

새로고침 해도 잘된다

quasar-project-js-4.zip

0.20MB