63 lines
2.2 KiB
Vue

<script>
import axios from 'axios'
import Config from '@/config.js'
import { useQuestionStore } from '@/stores/questions.js'
import { useAnswersStore } from '@/stores/answers.js'
import { useAppStore } from '@/stores/app.js'
export default {
setup() {
const questionStore = useQuestionStore()
const answersStore = useAnswersStore()
const appStore = useAppStore()
return {
questionStore,
answersStore,
appStore
}
},
name: 'CompareAnswersIndex',
mounted() {
this.getAnswers()
},
methods: {
getAnswers() {
this.error = this.questions = null
this.loading = true
axios.get(`${Config.SERVER}api/answers/`)
.then((response) => {
console.log('Fetched answer stats from the server.')
this.appStore.store('answers', response.data)
})
.catch( error => {
console.log(error)
this.$router.push('/err_refused')
})
axios.get(`${Config.SERVER}api/count/`)
.then((response) => {
console.log('Fetched user count from the server.')
this.appStore.store('count', response.data)
})
.catch( error => {
console.log(error)
this.$router.push('/err_refused')
})
}
}
}
</script>
<template>
<div>
<router-view v-slot="{ Component, route }" class="w-full" ref="panel" appear>
<Transition mode="out-in"
enter-active-class="transition-all duration-300 origin-center ease-in"
enter-from-class="transform opacity-0 md:scale-95"
leave-active-class="transition-all duration-300 origin-center ease-out"
leave-to-class="transform opacity-0 md:scale-95"
>
<component :is="Component" :key="route.path"/>
</Transition>
</router-view>
</div>
</template>