UnivateProperties/src/components/admin/status/statusPage.vue

<template>
  <div>
    <!-- <section class="intro-single"> -->
    <div class="container">
      <br />
      <br />
      <br />
      <br />
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <!-- <div class="title-single-box"> -->
          <!-- <h2 class="title-single">Status List</h2> -->
          <!-- </div> -->
          <div class="title-box-d">
            <h1 class="title-d" style="text-align:left; font-size: 250%">Status List</h1>
          </div>
          <br />
        </div>
      </div>
    </div>
    <!-- </section> -->
    <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Id</th>
            <th>Code</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in statusList" :key="i">
            <td>{{item.id}}</td>
            <td>{{item.code}}</td>
            <td>{{item.description}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'StatusList',
  created() {
    this.getStatusList();
  },
  computed: {
    ...mapState('status', ['statusList']),
  },
  methods: {
    ...mapActions('status', ['getStatusList']),
  },
};
</script>
<style>
</style>