unity/resources/js/admin/pages/users/Form.vue

  <template>
    <b-card class="main-card mb-3">
      <div v-if="!this_user.data" class="text-center">
        <vue-element-loading :active="true" spinner="line-scale" color="var(--primary)"></vue-element-loading>
      </div>
      <div v-if="this_user.data">
        <form-wizard 
          @on-complete="onComplete"
          title="" 
          subtitle=""
          finish-button-text="Back"
          @keydown="form.errors.clear($event.target.name)"
          color="var(--primary)"
        >
          <tab-content 
            title="Details"
            icon="fa fa-info-circle"
          >
            <image-read-only-input
              :label="'Profile'"
              :exist_img="this_user.data.img"
            >
            </image-read-only-input>
            <!-- ///////////////////////////////////////////////////// -->
            <text-read-only-input
              :label="'Username'"
              :value="this_user.data.username"
            >
            </text-read-only-input>
            <!-- ///////////////////////////////////////////////////// -->
            <text-read-only-input
              :label="'Email'"
              :value="this_user.data.email"
            >
            </text-read-only-input>
            <!-- ///////////////////////////////////////////////////// -->
            <text-read-only-input
              :label="'Country'"
              :value="this_user.data.country_list[0].name"
            >
            </text-read-only-input>
            <!-- ///////////////////////////////////////////////////// -->
            <text-read-only-input
              :label="'Status'"
              :value="this_user.data.status[0].name"
            >
            </text-read-only-input>
            <!-- ///////////////////////////////////////////////////// -->
          </tab-content>
        </form-wizard>
      </div>
    </b-card>
  </template>

  <script>
    import TextReadOnlyInput from '../../components/inputs/TextReadOnlyInput';
    import ImageReadOnlyInput from '../../components/inputs/ImageReadOnlyInput';

    export default {
      props: {
        mode: String
      },
      components: {
        TextReadOnlyInput,
        ImageReadOnlyInput
      },
      data() {
        return {
          this_user: [],
        }
      },
      methods: {
        onComplete() {
          let vm = this;
          vm.$router.push('/user/list');
          return true;
        },
        loadThisUser() {
          let vm = this;
          let url = 'user/show/' + vm.$route.params.hash_id;
          let form = new Form({});
          General.getCall(url, form).then(response => {
            vm.this_user = response;
            vm.convertStatus();
          });
        },
        convertStatus() {
          let vm = this;  
          vm.this_user.data.status = General.initFormArray(Constants.admin_status, [vm.this_user.data.status]);
        },
      },
      created() {
        let vm = this;
        vm.loadThisUser();
      }
    }
</script>