68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
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 axios from 'axios';
|
|
import SurveyResult from './SurveyResult.vue';
|
|
|
|
export default {
|
|
components: {
|
|
SurveyResult
|
|
},
|
|
data() {
|
|
return {
|
|
results: []
|
|
};
|
|
},
|
|
methods: {
|
|
loadExperiences() {
|
|
axios
|
|
.get(
|
|
'https://vue-http-demo-8a928-default-rtdb.europe-west1.firebasedatabase.app/surveys.json'
|
|
)
|
|
.then(response => {
|
|
const data = response.data;
|
|
const results = [];
|
|
for (const id in data) {
|
|
results.push({
|
|
id: id,
|
|
name: data[id].name,
|
|
rating: data[id].rating
|
|
});
|
|
}
|
|
this.results = results;
|
|
})
|
|
.catch(error => {
|
|
console.log(error);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|