Skip to content
Snippets Groups Projects
Select Git revision
  • 22b397b4f51e55bae25fb34544d611877e68c6e5
  • main default protected
  • demo
  • tolsztoj
4 results

pelda-komponens.vue

Blame
  • pelda-komponens.vue 1.06 KiB
    <script setup>
    import {ref} from "vue";
    import axios from 'axios';
    
    const isLoading = ref(true);
    const aFact = ref('');
    
    function getAFact() {
      isLoading.value = true;
      axios.get('https://catfact.ninja/fact').then(result => {
        aFact.value = result.data.fact;
        isLoading.value = false;
      }).catch(error => {
        console.error('cannot get data from api', error);
      });
    }
    
    getAFact();
    
    const backendStatus = ref('unknown');
    function checkBackend() {
      axios.get('/api/ok').then(result=>{
        backendStatus.value = result.data;
      }).catch(error => {
        console.error('cannot get backend OK api endpoint', error);
        backendStatus.value = 'error';
      })
    }
    </script>
    
    <template>
      <div v-if="isLoading" class="loading">Loading...</div>
      <template v-else>
    <!--    <button @click="getAFact">Next fact</button>-->
    <!--    <div class="a-fact">{{ aFact }}</div>-->
      </template>
      <button @click="checkBackend">Check Backend</button>
      <p>Backend status is: {{backendStatus}}</p>
    </template>
    
    <style scoped>
    .loading {
      color: lightgray;
    }
    .a-fact {
      font-weight: bold;
    }
    </style>