pilotwings/frontend/views/Containers.vue

<template>
  <Loading class="container" :loading="loading">
    <Message v-if="error" type="danger">Error loading containers</Message>
    <ul v-if="!loading && !error">
      <li v-for="container in containers" :key="container.name">
        {{ container.name }}
      </li>
    </ul>
  </Loading>
</template>

<script lang="ts">
import Loading from '@/components/Loading.vue'
import Message from '@/components/Message.vue'
import axios from 'axios'

export default {
  name: 'Containers',
  components: {
    Loading,
    Message,
  },
  data() {
    return {
      containers: [],
      error: false,
      loading: true,
    }
  },
  async mounted() {
    try {
      this.containers = await axios.get(`${this.$api}/api/containers`)
    } catch (error) {
      console.error(error)
      this.error = true
    } finally {
      this.loading = false
    }
  },
}
</script>