NodeList.vue

<template>
  <div>
    <!-- ... -->

    <h2 class="row">Online Nodes</h2>

    <div class="row">
      <p v-if="error == '' && !loading && nodes.length == 0">No nodes found</p>

      <div v-if="!loading && processedNodes.length > 0" class="table-responsive">
       <!-- ... -->
      </div>
    </div>

    <div v-if="loading && error.length != 0" class="row justify-content-center">
      <Spinner></Spinner>
    </div>

    <div  class="row">
      <p class="text-center" style="color: red;">{{ error }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Spinner from '@/components/Util/Spinner'
export default {
  name: 'NodeList',
  components: {
    Spinner
  },
  data () {
    return {
      loading: false,
      error: ''
    }
  },
  async mounted () { // note this function
    this.error = ''
    this.loading = true
    try {
      await this.$store.dispatch('nodes/getNodeList')
    } catch (e) {
      this.error = e
    }
    this.loading = false
  },
  computed: {
    ...mapState({
      nodes: state => state.nodes.nodeList
    }),
  }
}
</script>

<style>
</style>