hands on vue3 - firebase를 이용하여 db에 넣은 값 가져오기

[목표]

firebase에 저장된 DB내용을 불러오기

 

기본 셋팅은 아래의 포스팅에서 하면 된다.

 

hands on vue3 - DB를 무료인 firebase를 사용해보자-DB연결편

 

Load Submitted Experiences 버튼을 클릭하면

저장된 내용을 불러올 수 있도록 한다.

---

 

[UserExperiences.vue]

<template>
  <section>
    <base-card>
      <h2>Submitted Experiences</h2>
      <div>
        <base-button @click="loadExperiences"
          >Load Submitted Experiences</base-button
        >
      </div>
      <ul>
        <survey-result
          v-for="result in results"
          :key="result.id"
          :name="result.name"
          :rating="result.rating"
        ></survey-result>
      </ul>
    </base-card>
  </section>
</template>

<script>
import SurveyResult from "./SurveyResult.vue";

export default {
  data(){
    return{
      results: [],
    };
  },
  components: {
    SurveyResult,
  },
  methods: {
    loadExperiences() {
      fetch('https://vue-http-demo-edb8c-default-rtdb.firebaseio.com/surveys.json')
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          for(const id in data){
            const result = {};
            result.id = id;
            result.name = data[id].name;
            result.rating = data[id].rating;

            this.results.push(result);
          }
        })
    },
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>