Vuejs

SingleFileComponnent.vue

<!-- ________________________________________________________________________________ --> 
<!-- HTML -->
<!-- ________________________________________________________________________________ --> 
<template>
  <div class="container has-text-centered">
    <h1 class="title">Account</h1>

    <label-text label="UniqueId">{{uniqueId}}</label-text>
    <label-text label="Account Balance">
      <router-link to="/user/payments">{{amount | currency}}</router-link>
    </label-text>

    <label-input label="Email" storeValue="account/email"></label-input>
    <label-input label="Default Phone" storeValue="account/phone"></label-input>
    <label-input label="Call Limit" storeValue="account/callLimit"></label-input>
    <!-- SAVE BUTTON -->
    <b-field horizontal>
      <p class="control">
        <button @click="save()" class="button is-primary" :class="{'is-loading': isLoading}">Save</button>
      </p>
    </b-field>
  </div>
  <!-- CONTAINER -->
</template>

<!-- ________________________________________________________________________________ --> 
<!-- SCRIPT -->
<!-- ________________________________________________________________________________ --> 
<script>
/**
 * View - Account
 *  Display and modify general account information
 */
import LabelText from "@/components/LabelText";
import LabelInput from "@/components/LabelInput";
//--------------------------------------------------------------------------------------
// Default
//--------------------------------------------------------------------------------------
export default {
  name: "account",
  components: {
    LabelText,
    LabelInput
  },
  //--------------------------------------------------------------------------------------
  // DATA
  //--------------------------------------------------------------------------------------
  data: function() {
    return {
      isLoading: false
    };
  },
  //--------------------------------------------------------------------------------------
  // METHODS
  //--------------------------------------------------------------------------------------
  methods: {
    async save() {
      try {
        this.isLoading = true
        let result = await this.$store.dispatch('account/patch')
        this.$store.dispatch('notifyGood', result.message)
      } catch(error) {
        this.$store.dispatch('notifyBad', error.message)
      } finally {
        this.isLoading = false
      }
    }
  },
  //--------------------------------------------------------------------------------------
  // MOUNTED
  //--------------------------------------------------------------------------------------
  mounted() {
    this.$store.dispatch("notifyGood", "Account");
  },
  //--------------------------------------------------------------------------------------
  // COMPUTED
  //--------------------------------------------------------------------------------------
  computed: {
    uniqueId() {
      return this.$store.state.uniqueId;
    },
    amount() {
      return this.$store.state.amount;
    }
  
  }
}; // end of export
</script>

<!-- ________________________________________________________________________________ --> 
<!-- STYLE -->
<!-- ________________________________________________________________________________ --> 
<style lang="scss" scoped>
.label {
  padding-top: 8px;
}

.text {
  padding-top: 8px;
}
</style>